ブログを作る③ - シンタックスハイライトの実装
コードブロックのシンタックスハイライトに対応した。
Javascriptのシンタックスハイライターについて軽く調べてみたところ、よく見かけたのは
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.jsは、refractorを使って任意で対応する言語を選択できるため軽量、という特徴があるらしい。
自前でやると設定が面倒だが、rehype-prismならばビルド時にMarkdownのコードブロックから使用言語を読み取って、その辺をよしなにやってくれる。
テーマはprism-vsc-dark-plusに少し手を加えたものを使っている。
普段使っているVisual Studio Codeと同じハイライトが再現されているので、馴染みのある色合いだ。
Visual Studio Codeのシンタックスハイライトは視認性の悪い暖色が少なく、見やすいと思う。
普段使っている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>
);
}
}