【Next.js】Prism.jsでコードをSyntax Highlightingする方法【React】

【Next.js】Prism.jsでコードをシンタックスハイライトする方法【React】

【Next.js】Prism.jsでコードをシンタックスハイライトする方法

Prism.jsのインストール

npm install prismjs

まずnpmでPrism.jsをインストール。

npm install babel-plugin-prismjs

必要に応じて、babelプラグインである「babel-plugin-prismjs」をインストール。これで必要なテーマやプラグインのみを利用することができます。

.babelrcの設定

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

次にルートディレクトリ下に.babelrcを作成し、そこに諸々設定を記述していきます。

ここで指定できるのは以下の4つ。

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

languages・plugins・themeに関しては一覧で公式サイトから確認することができます。
参考 PluginsPrism

ちなみに自分の場合はテーマは使用せず、自前でハイライトの装飾をするためthemeもcssも指定していません。

シンタックスハイライトの準備

<pre>
  <code className="language-{言語名}"}>{コード}</code>
</pre>

まず前提として、Prism.jsではコードをpre・codeタグで囲んであげることでハイライトが適用されます。

それからcodeタグのクラスにlanguage-{言語名}と指定する必要があります。

<pre className="line-numbers">
  <code className="language-{言語名}"}>{コード}</code>
</pre>

ちなみにメジャーなプラグインであるline-numers(行番号表示)を適用したい場合は、preタグのクラスにline-numbersを指定してあげればOK。

Prism.highlightAll();

最後にhighlightAll()を呼んであげれば、codeタグで囲んだコードにハイライトが適用されます。

コンポーネント化する

const SyntaxHighlighter = ({children, language}) => {

    useEffect(() => {
        Prism.highlightAll();
    }, []);

    return (
        <div className="syntax-highlight">
            <pre>
                <code className={`language-${language}`}>{children}</code>
            </pre>
        </div>
    );

}
export default SyntaxHighlighter;

コンポーネント化するとこんな感じ。

useEffectを用いて、初回レンダリング時にPrism.highlightAll();を呼び出します。そうすることで、codeタグで囲んだテキストに対してシンタックスハイライトを適用することができます。

<SyntaxHighlighter language={言語}>
    {コード}
</SyntaxHighlighter>

そして上記のように、コンポーネントの引数としてlanguageに言語名を指定すればOK。

シンタックスハイライトが適用された

オリジナルの装飾を加え、無事シンタックスハイライトが適用されました。

お疲れ様!

くるみ

コメントを残す

この記事を書いた人
おはようポテトのプロフィール画像
おはようポテト

新卒1年目のひよっこWEBエンジニア。業務ではPHPを触り、プライベートではNext.jsで宅配冷凍弁当の比較サイトWeb制作に役立つツールの開発・運営をしています。お問い合わせはこちらよりどうぞ。