841-biborokuWebフロントエンドの備忘録

シンタックスハイライトをprism.jsからReact Syntax Highlighterのprismに変更する

Next.js

なぜprism.jsからReact Syntax Highlighterのprismに変更したか

「📝本文にシンタックスハイライトprism.jsを設定する」の設定不足か、一部言語でスタイルが反映されませんでした。

babel-plugin-prismjsと.babelrc.jsonを設定したことでスタイルが反映は反映されるようになりましたが、"next/font" requires SWC although Babel is being used due to a custom babel config being present.のエラーが出たので、いっそのこと違うシンタックスハイライトを導入しようと思い変更に至りました。

React Syntax Highlighterは、hljsとprismjsのどちらかを選択できる点もよかったです。

記事ページにReact Syntax Highlighterを設定する

パッケージのインストール

npm i react-syntax-highlighter
npm i @types/react-syntax-highlighter

インポートと設定

公式通り設定したのですが、エラーになったり・ならなかったり・・

「コードブロックのシンタックスハイライト対応しました」こちらの記事を参考にテーマの読み込み方を変更したらエラーがなくなりました。

//変更前
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { tomorrow } from "react-syntax-highlighter/dist/esm/styles/prism";

//変更後
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { tomorrow } from "react-syntax-highlighter/dist/cjs/styles/prism";

コードブロック箇所の置き換え

src/pages/entry/[slug].tsx

//変更前
<pre className={clsx(styles.pre, `language-${sec.lang}`)}>
 <code className={`language-${sec.lang}`}>{sec.body}</code>
</pre>

//変更後
<SyntaxHighlighter
  language={`${sec.lang}`}
  style={tomorrow}
>
  {sec.body}
</SyntaxHighlighter>

microCMS側で言語を指定しているのでその値をlanguageに設定しています。

language={sec.lang}をそのまま設定してもシンタックスハイライトが反映されなかったので、language={`${sec.lang}`}に書き換えました。

行番号オプション

showLineNumbers={true}

有効にすると左に行番号が表示されます。

startingLineNumber="行番号（数字）"を指定すると開始行番号が指定の番号になります。

シェア

Category