【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 | 使用するプラグイン。コピーボタンの設置や差分表示など、様々な機能が揃っている。 |
| theme | Prism.js側で用意されているテーマの中から好きなものを指定できる。 |
| css | Prism.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。
オリジナルの装飾を加え、無事シンタックスハイライトが適用されました。
お疲れ様！
くるみ
