シンタックスハイライト
Coresyntect によるサーバーサイドのシンタックスハイライト。常時有効でテーマは設定可能。
SyntectPlugin は、ビルド時にサーバーサイドのシンタックスハイライトを実行します。
常に有効です。Markdown 内のすべてのフェンス付きコードブロックは、
syntect — Sublime Text 互換の文法を使う
Rust ライブラリ — によってハイライトされ、色注釈付きの HTML が出力に焼き込まれます。
ハイライトのために JavaScript がブラウザへ送られることはありません。
テーマの設定
デフォルトのテーマは "base16-ocean.dark" です。zfb.config.ts で変更します:
export default {
codeHighlight: {
theme: "Solarized (light)",
},
};カスタムの .tmTheme ファイルや、補助的なクライアントサイドのパターンについては、
以下の専用ガイドで解説しています。
ライト / ダークのデュアルテーマ
theme を 1 つ指定する代わりに、themeLight と themeDark の両方を設定すると、
各ブロックを 2 回ハイライトし、トークンごとの色を CSS カスタムプロパティとして
出力します。これにより、描画後にページのライト / ダークモードに応じてアクティブな
色が選ばれます。JavaScript は不要です。
export default {
codeHighlight: {
themeLight: "InspiredGitHub",
themeDark: "base16-ocean.dark",
},
};themeLight と themeDark は必ずセットで指定する必要があり、theme とは
排他です。<pre> には class="syntect-dual" が付与され、利用側は 1 つの
light-dark() CSS ルールで色を解決します。これらは Shiki ではなく syntect の
テーマ名です。出力される markup と CSS ルールについては、
専用ガイド
を参照してください。
詳細なドキュメント
テーマ名、カスタム .tmTheme の読み込み、クライアントサイドの補助的なハイライト、
ビルド後のカスタム文法パターンについては、
シンタックスハイライトを参照してください。
順序に関する注意
SyntectPlugin は hast フェーズで、CodeTitlePlugin、MermaidPlugin、その他
すべてのコードブロックビジターの後、最後に実行されます。各 <pre><code>
要素を生の HTML フラグメントに置き換えるため、構造化された <pre> を読み取る
必要があるプラグインは、これより前に実行されなければなりません。