🎨 コードブロックを美しく！Prism.js シンタックスハイライト完全実装ガイド

/* Prism.js Syntax Highlighting Styles */
pre,
code {
  font-family: "Fira Code", "Courier New", monospace !important;
}

/* Base styles for code blocks */
pre.language-code,
pre[class*="language-"] {
  background: #1e1e1e;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
  overflow-x: auto;
  color: #d4d4d4;
  line-height: 1.5;
}

/* Inline code */
code.inline-code {
  background: #f3f4f6;
  color: #1f2937;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-size: 0.875em;
  font-weight: 600;
}

/* Prism syntax highlighting colors - VS Code Dark theme */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #6a9955; /* 緑色のコメント */
  font-style: italic;
}

.token.keyword {
  color: #569cd6; /* 青色のキーワード */
}

.token.string {
  color: #ce9178; /* オレンジ色の文字列 */
}

.token.function,
.token.class-name {
  color: #dcdcaa; /* 黄色の関数名 */
}

.token.number {
  color: #b5cea8; /* 緑色の数値 */
}

useEffect(() => {
  // Prism.jsの動的読み込み
  const loadPrism = async () => {
    if (typeof window !== 'undefined' && !(window as any).Prism) {
      const loadScript = (src: string) => {
        return new Promise<void>((resolve) => {
          const script = document.createElement('script');
          script.src = src;
          script.onload = () => resolve();
          script.onerror = () => resolve();
          document.head.appendChild(script);
        });
      };
      
      // Prism core
      await loadScript('https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js');
      
      // 言語サポートを追加
      await Promise.all([
        loadScript('https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js'),
        loadScript('https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-typescript.min.js'),
        loadScript('https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js'),
        loadScript('https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js'),
      ]);
      
      // ハイライト実行
      if ((window as any).Prism) {
        setTimeout(() => {
          (window as any).Prism.highlightAll();
        }, 50);
      }
    }
  };
  
  // 100ms遅延してから実行（ページレンダリング優先）
  const timer = setTimeout(loadPrism, 100);
  
  return () => clearTimeout(timer);
}, [article]);

/* Language-specific highlighting */
.language-javascript .token.keyword,
.language-typescript .token.keyword {
  color: #569cd6;
}

.language-bash .token.function {
  color: #4ec9b0;
}

.language-yaml .token.key {
  color: #9cdcfe;
}

.language-json .token.property {
  color: #9cdcfe;
}

/* MQL4言語の定義 */
.language-mql4 .token.keyword {
  color: #569cd6;
}

.language-mql4 .token.function {
  color: #dcdcaa;
}

const components = {
  pre: ({ children, ...props }: any) => {
    return (
      <pre {...props} className="language-code">
        {children}
      </pre>
    );
  },
  code: ({ node, inline, className, children, ...props }: any) => {
    const match = /language-(\w+)/.exec(className || '');
    const language = match ? match[1] : '';
    
    if (!inline && language) {
      return (
        <code className={`language-${language}`} {...props}>
          {children}
        </code>
      );
    }
    
    return (
      <code className={`inline-code ${className || ''}`} {...props}>
        {children}
      </code>
    );
  },
};

// 100ms遅延でページレンダリングを優先
const timer = setTimeout(loadPrismDelayed, 100);

// Prismのハイライトを実行（少し遅延）
if ((window as any).Prism) {
  setTimeout(() => {
    (window as any).Prism.highlightAll();
  }, 50);
}

// Cloudflare CDNを使用して高速配信
const cdnBase = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/';

/* ライトテーマ用の設定 */
@media (prefers-color-scheme: light) {
  pre[class*="language-"] {
    background: #f8f8f8;
    color: #333;
  }
}

/* 日本語対応フォント */
pre, code {
  font-family: "Fira Code", "Source Han Code JP", "Noto Sans Mono CJK JP", monospace;
}

// カスタム言語の定義
if ((window as any).Prism) {
  (window as any).Prism.languages.mql4 = {
    'keyword': /\b(?:if|else|for|while|do|switch|case)\b/,
    'function': /\b[a-zA-Z_][a-zA-Z0-9_]*(?=\s*\()/,
    'string': /"(?:\\.|[^\\"])*"/,
    'comment': /\/\/.*|\/\*[\s\S]*?\*\//,
  };
}

// 解決策：手動でハイライト実行
if ((window as any).Prism) {
  (window as any).Prism.highlightAll();
}

# 解決策：ビルド後に確認
npm run build
# CSSファイル内にPrismスタイルが含まれているかチェック

// 解決策：必要な言語のみ読み込み
const languages = ['javascript', 'typescript', 'python'];
await Promise.all(
  languages.map(lang => 
    loadScript(`${cdnBase}/components/prism-${lang}.min.js`)
  )
);