Shiki でビルド時シンタックスハイライトを実現する

技術ブログでコードを綺麗に見せたいなら Shiki が有力です。ビルド時に色付けするのでランタイム JS がゼロになります。

なぜ Shiki なのか

• VSCode と同じテーマが使える
• 言語サポートが広い
• 色付け済み HTML を吐くのでクライアント処理が不要

デュアルテーマ

ライト/ダークでテーマをペアにできます。

.use(rehypePrettyCode, {
  theme: { light: "github-light", dark: "github-dark-dimmed" },
  keepBackground: false,
})

あとは CSS で --shiki-light / --shiki-dark を切り替えるだけです。

.dark code[data-theme*=" "] span {
  color: var(--shiki-dark);
}

まとめ

静的サイトと相性が良く、見た目も良い。技術ブログのコードブロックは Shiki を選んでおけば間違いありません。