フロントエンド約 1 分で読めます
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 を選んでおけば間違いありません。
関連記事
約 5 分
React Hook Form と Zod を zodResolver でつなぐ実装を、ログイン・新規登録フォームを題材に一気通貫でまとめます。z.infer での型導出、.refine でのパスワード一致、formState.errors の分割代入まで。さらに register の spread が非制御コンポーネントで効く理由と、Controller でラップしないと対応できないケースの境界を整理します。
約 3 分
pnpm製プロジェクトで、ターミナルのESLintは動くのにエディタ上では警告が一切出ない。原因はプラグインのhoist、決め手は拡張のログだった。.npmrcでの解決とモノレポでの設定まで。
約 4 分
TanStack Query を Next.js App Router の静的エクスポート構成に入れる手順を、Providerの初期化(use client)→layoutラップ→共通fetch(lib/api.ts)→hooks(1ファイル1フック)→コンポーネントでの使い方、まで一気通貫でまとめます。