シンタックスハイライト - Prism

表示例

swift

print("hello")

bash はデフォルトはハイライトされない

bash

echo "hello"

設定箇所

docusaurus.config.ts の

themeConfig > prism > additionalLanguages

対応言語を追加

docusaurus.config.ts

const config: Config = {
  ..
  themeConfig: {
    ..
    prism: {
      theme: prismThemes.github,
      darkTheme: prismThemes.dracula,
      additionalLanguages: [
        'bash',
        'php',
        'swift',
        'python',
        'javascript',
        'typescript',
        'jsx',
        'tsx',
        'css',
        'ruby',
        'powershell',
        'c',
        'csharp',
        'cpp',
        'kotlin',
        'markdown',
        'latex'
      ],
    },
    ..
  }
};

注意点

• 足したあとは、再度ビルドする必要がありそう (ローカルで確認中なら、npm run start しなおしで良い)
• ビルド時に必要分だけ取り込んでいるということだろうか
• 足してホットリロード任せしたままだと、一見なにも反応してない表示になるが、ブラウザの console 見てみるとエラーが出てたりする

関連知識

• Docusaurus のコードハイライトは prism-react-renderer をベースにしている
• そこに Prism の追加言語設定を渡している