【React】Prism.jsでソースコードをSyntax Highlightする

React
2022-08-30

1. Prism.js のインストール

npm install prismjs

npm install babel-plugin-prismjs

必要なテーマやプラグインのみに絞って利用したい場合は、 babelプラグインであるbabel-plugin-prismjsもインストールする。

2. babel の設定

.babelrc.jsonを作成し、そこに諸々設定を記述する。

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "prismjs",
      {
        "languages": ["html", "css", "ts", "tsx", "json"],
        "plugins": ["line-numbers"]
      }
    ]
  ]
}

各オプションの概要は以下の通りで、それぞれで指定できるものは公式サイトにて確認できる。

項目	概要
languages	ハイライトを適用する言語
plugins	使用するプラグイン。コピーボタンの設置や差分表示など、様々な機能がある。
theme	Prism.js側で用意されているテーマの中から好きなものを指定できる。
css	themeのCSSを読み込むかどうか。デフォルトは`false`だが、themeを指定する場合は`true`にする必要あり。

3. コードをハイライトする

import { highlight, languages } from "prismjs";

const HighlightedCodeBlock = ({
  code,
  lang,
}: {
  code: string;
  lang: string;
}) => {
  const highlightedCode = highlight(code, languages[lang], lang);

  return (
    <pre>
      <code dangerouslySetInnerHTML={{ __html: highlightedCode }} />
    </pre>
  );
};

コードと言語名を引数で受け取り、ハイライトするコンポーネントを作成。

4. コンポーネントを呼び出す

<HighlightedCodeBlock code={code} lang="ts" />;

langには.babelrc.jsonで設定した名称のままの言語名を渡してあげればOK。