【AI駆動開発】Cursorを使いこなして1ヶ月でプログラミング学習サイトを作ったのでノウハウを伝えたい #Next.js – Qiita

'use client';

import Prism from 'prismjs';
import 'prismjs/themes/prism-tomorrow.css';
import React, { useCallback, useEffect, useRef } from 'react';
import ReactMarkdown from 'react-markdown';
import rehypeRaw from 'rehype-raw';
import remarkGfm from 'remark-gfm';

// 必要な言語をインポート
import 'prismjs/components/prism-bash';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-java';
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-jsx';
import 'prismjs/components/prism-python';
import 'prismjs/components/prism-ruby';
import 'prismjs/components/prism-tsx';
import 'prismjs/components/prism-typescript';

type MarkdownRendererProps = {
  content: string;
  className?: string;
};

// コード要素のprops型を定義
interface CodeProps {
  className?: string;
  children?: React.ReactNode;
  [key: string]: unknown;
}

/**
 * マークダウンデータの前処理
 * エスケープされた文字を実際の文字に変換
 */
function preprocessMarkdown(content: string): string {
  return content
    .replace(/\\n/g, '\n')
    .replace(/\\t/g, '\t')
    .replace(/\\r/g, '\r')
    .replace(/\\\\/g, '\\')
    .replace(/\\"/g, '"')
    .replace(/\\'/g, "'");
}

/**
 * 汎用的なマークダウンレンダリングコンポーネント
 * 問題文や解説文など、様々な用途で使用可能
 */
export default function MarkdownRenderer({ content, className = '' }: MarkdownRendererProps) {
  const containerRef = useRefHTMLDivElement>(null);
  const highlightTimeoutRef = useRefNodeJS.Timeout>();

  // マークダウンコンテンツの前処理
  const processedContent = React.useMemo(() => {
    return preprocessMarkdown(content);
  }, [content]);

  // Prism.jsでハイライトを適用する関数
  const highlightCode = useCallback(() => {
    if (containerRef.current && typeof window !== 'undefined') {
      // 既存のハイライトをクリア
      const preElements = containerRef.current.querySelectorAll('pre');
      preElements.forEach((pre) => {
        const code = pre.querySelector('code');
        if (code) {
          // Prismが追加したクラスを保持しつつ、トークンをクリア
          const className = code.className;
          const textContent = code.textContent || '';
          code.innerHTML = '';
          code.textContent = textContent;
          code.className = className;
        }
      });

      // 新しくハイライトを適用
      Prism.highlightAllUnder(containerRef.current);
    }
  }, []);

  // コンテンツ変更時とマウント時にハイライトを適用
  useEffect(() => {
    // 既存のタイムアウトをクリア
    if (highlightTimeoutRef.current) {
      clearTimeout(highlightTimeoutRef.current);
    }

    // 複数回のハイライト適用で確実性を高める
    const applyHighlight = () => {
      highlightCode();

      // 追加の保険として、少し遅れて再度適用
      highlightTimeoutRef.current = setTimeout(() => {
        highlightCode();
      }, 300);
    };

    // 初回のハイライト適用
    const initialTimeout = setTimeout(applyHighlight, 50);

    return () => {
      clearTimeout(initialTimeout);
      if (highlightTimeoutRef.current) {
        clearTimeout(highlightTimeoutRef.current);
      }
    };
  }, [processedContent, highlightCode]);

  // MutationObserverでDOM変更を監視
  useEffect(() => {
    if (!containerRef.current) return;

    const observer = new MutationObserver((mutations) => {
      // コードブロックに関する変更があった場合のみハイライトを再適用
      const hasCodeChanges = mutations.some((mutation) => {
        if (mutation.type === 'childList') {
          const addedNodes = Array.from(mutation.addedNodes);
          const removedNodes = Array.from(mutation.removedNodes);
          return [...addedNodes, ...removedNodes].some((node) => {
            if (node.nodeType === Node.ELEMENT_NODE) {
              const element = node as Element;
              return (
                element.tagName === 'PRE' ||
                element.tagName === 'CODE' ||
                element.querySelector('pre') ||
                element.querySelector('code')
              );
            }
            return false;
          });
        }
        return false;
      });

      if (hasCodeChanges) {
        highlightCode();
      }
    });

    observer.observe(containerRef.current, {
      childList: true,
      subtree: true,
    });

    return () => {
      observer.disconnect();
    };
  }, [highlightCode]);

  return (
    div ref={containerRef} className={`prose max-w-none ${className}`}>
      div className="markdown-content">
        ReactMarkdown
          remarkPlugins={[remarkGfm]}
          rehypePlugins={[rehypeRaw]}
          components={{
            // コードブロックの処理
            pre: ({ children, ...props }) => {
              const childArray = React.Children.toArray(children);
              const codeElement = childArray.find((child) => React.isValidElement(child) && child.type === 'code');

              if (codeElement && React.isValidElement(codeElement)) {
                const codeProps = codeElement.props as CodeProps;
                const className = codeProps.className || '';

                // 言語とファイル名の抽出
                const languageMatch = className.match(/language-(\w+)(?::(.+))?/);
                const language = languageMatch ? languageMatch[1] : 'plaintext'; // 言語指定がない場合はplaintext
                const fileName = languageMatch && languageMatch[2] ? languageMatch[2] : '';

                // codeElementのpropsからinline-codeを削除（コードブロック内では使わない）
                const newCodeProps = { ...codeProps };
                if (newCodeProps.className === 'inline-code') {
                  newCodeProps.className = 'language-plaintext';
                }

                return (
                  div className={`code-block ${language === 'plaintext' ? 'code-block-plaintext' : ''}`}>
                    {fileName && (
                      div className="code-filename">
                        span>{fileName}span>
                      div>
                    )}
                    pre {...props} className={`language-${language}`} data-prism-processed="false">
                      {React.cloneElement(codeElement, {
                        className: `language-${language}`,
                        ...newCodeProps,
                      })}
                    pre>
                  div>
                );
              }

              // 言語指定のないpreタグは特別なクラスで扱う
              return (
                div className="code-block code-block-plaintext">
                  pre {...props} className="language-plaintext" data-prism-processed="false">
                    {children}
                  pre>
                div>
              );
            },

            // インラインコードの処理
            code: ({ className, children, ...props }) => {
              const content = String(children).replace(/\n$/, '');
              const match = className?.match(/language-(\w+)/);

              // 親要素がpreかどうかを確認する関数
              const isInsidePre = () => {
                // ブラウザ環境でのみ判定可能
                if (typeof document !== 'undefined' && props.node) {
                  // ReactMarkdownのnode型は複雑なので、より安全な方法で処理
                  type ReactMarkdownNode = {
                    parentNode?: {
                      tagName?: string;
                    };
                  };

                  // unknownを経由してキャスト
                  const node = props.node as unknown as ReactMarkdownNode;
                  if (node.parentNode?.tagName === 'PRE') {
                    return true;
                  }
                }
                // コンテンツの改行数で判断（複数行ならコードブロック内と推測）
                const textContent = String(children);
                return textContent.includes('\n') || textContent.length > 80;
              };

              // インラインコードの場合
              if (!match) {
                // 親がpreの場合はplaintextとして扱う
                if (isInsidePre()) {
                  return (
                    code className="language-plaintext" {...props}>
                      {children}
                    code>
                  );
                }

                // 通常のインラインコード
                return (
                  code className="inline-code" {...props}>
                    {children}
                  code>
                );
              }

              // コードブロック内のコード要素
              const language = match[1];
              return (
                code className={`language-${language}`} {...props}>
                  {content}
                code>
              );
            },

            // その他の要素のカスタマイズ（オプション）
            p: ({ children }) => p className="mb-4 leading-relaxed text-gray-700 last:mb-0">{children}p>,
            h1: ({ children }) => h1 className="mb-4 text-2xl font-bold text-gray-900 sm:text-3xl">{children}h1>,
            h2: ({ children }) => h2 className="mb-3 text-xl font-semibold text-gray-900 sm:text-2xl">{children}h2>,
            h3: ({ children }) => h3 className="mb-3 text-lg font-semibold text-gray-900 sm:text-xl">{children}h3>,
            ul: ({ children }) => ul className="mb-4 space-y-1 pl-6">{children}ul>,
            ol: ({ children }) => ol className="mb-4 space-y-1 pl-6">{children}ol>,
            li: ({ children }) => li className="text-gray-700">{children}li>,
            blockquote: ({ children }) => (
              blockquote className="my-4 border-l-4 border-blue-400 bg-blue-50 py-2 pl-4 text-gray-700 italic">
                {children}
              blockquote>
            ),
            a: ({ children, href }) => (
              a
                href={href}
                className="text-blue-600 underline hover:text-blue-800 hover:no-underline"
                target="_blank"
                rel="noopener noreferrer"
              >
                {children}
              a>
            ),
          }}
        >
          {processedContent}
        ReactMarkdown>
      div>
    div>
  );
}