シンタックスハイライト

zfb は syntect によるサーバーサイドのシンタックスハイライトを搭載しています。このページでは組み込みテーマの設定方法、カスタム .tmTheme ファイルの使い方、補足パターンを解説します。

概要

zfb は syntect を使ったビルド時シンタックスハイライトを搭載しています。コードブロックは HTML に変換されてバンドルに埋め込まれるため、ブラウザへの JS は不要です。

カスタムテーマ（.tmTheme）の使い方

themesDir に .tmTheme ファイルを格納したディレクトリを指定することで、Dracula などの任意のテーマを利用できます。

// zfb.config.ts
export default {
  codeHighlight: {
    themesDir: "./themes",   // プロジェクトルートからの相対パス
    theme: "Dracula",        // .tmTheme ファイル内の name キーの値
  },
};

ディレクトリ構成:

my-project/
├── themes/
│   └── dracula.tmTheme
├── pages/
├── content/
└── zfb.config.ts

themesDir が存在しない場合や .tmTheme のパースに失敗した場合は、ビルド開始時に（ページの描画前に）ファイルパスを含むエラーメッセージが表示されます。

英語の最新ドキュメントは Syntax Highlighting を参照してください。