ブログを作る③ - シンタックスハイライトの実装

みんな大好きシンタックスハイライト
みんな大好きシンタックスハイライト
コードブロックのシンタックスハイライトに対応した。
Javascriptのシンタックスハイライターについて軽く調べてみたところ、よく見かけたのは
  • prism.js
  • highlight.js
  • shiki
の3つだった。
特に強いこだわりはなかったのだけど、highlight.jsはJSXのハイライトに難があり、shikiはNext.jsとの相性に難があったので、最終的にはprism.js一択だった。

Markdown変換にはremark:rehypeアーキテクチャを採用しているので、prism.jsに対応した拡張であるrehype-prismを利用することにした。
prism.jsは、refractorを使って任意で対応する言語を選択できるため軽量、という特徴があるらしい。
自前でやると設定が面倒だが、rehype-prismならばビルド時にMarkdownのコードブロックから使用言語を読み取って、その辺をよしなにやってくれる。
テーマはprism-vsc-dark-plusに少し手を加えたものを使っている。
普段使っているVisual Studio Codeと同じハイライトが再現されているので、馴染みのある色合いだ。
Visual Studio Codeのシンタックスハイライトは視認性の悪い暖色が少なく、見やすいと思う。
class MyDocument extends Document {
  render() {
    return (
      <Html lang="ja">
        <Head>
          <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}