Syntax Highlighting

syntect によるビルド時コードハイライト。アクティブなカラースキームに追従するライト/ダークのデュアルテーマ対応。

Core 機能 — 常に有効です。設定は不要です。

概要

すべてのコードフェンスブロックは、ビルド時に syntect を使ってハイライトされます。syntect は Sublime Text 互換の文法定義を使用する Rust ライブラリです。ハイライト済みの HTML は SSR 出力に直接埋め込まれるため、ブラウザで JavaScript は不要です。

テーマ

zudo-doc はコードをデュアルテーマでハイライトします。ライトテーマ（base16-ocean.light）とダークテーマ（base16-ocean.dark）を、zfb.config.ts の codeHighlight.themeLight / codeHighlight.themeDark で設定します。

単一テーマの色を color:#hex としてインラインで焼き込む（シングルテーマ時のデフォルト。反対の背景では読めなくなります）のではなく、syntect は2回ハイライトを行い、各トークンの2色を CSS カスタムプロパティ --shiki-light と --shiki-dark として出力します。スタイルシートはこれらを light-dark() で解決します。これはテーマトグルが設定する color-scheme プロパティと同じ仕組みで駆動されるため、クライアントサイドの JavaScript なしでコードがライト/ダークの切り替えに追従します。すべての <pre> 要素には syntect-dual クラスが付与されます。

テーマ名は syntect の組み込み名（例: base16-ocean.light、InspiredGitHub、Solarized (dark)）であり、Shiki のテーマ名ではありません。

対応言語

Sublime Text 互換の文法がある言語はすべて対応しています。開始フェンスに言語識別子を指定します。

```ts
const greeting: string = "hello";
```

次のようにレンダリングされます。

const greeting: string = "hello";

言語識別子を指定しない場合は、ハイライトなしのプレーンテキストとしてレンダリングされます。

出力マークアップ

ハイライトされたコードブロックは以下のようにレンダリングされます。

<pre class="syntect-dual" style="--shiki-light-bg:#eff1f5;--shiki-dark-bg:#2b303b">
  <code><span style="--shiki-light:#4f5b66;--shiki-dark:#c0c5ce">…</span></code>
</pre>

Code Title 機能と組み合わせると、<pre> は .code-block-container div の中にラップされます。UI に表示されるコピーボタンはクライアントサイドの JavaScript で注入されます（オプトインの Code Enrichment 機能の一部です）。

処理順序

シンタックスハイライターは hast フェーズで最後に実行されます。Code Title やその他のコードブロックプラグインの後で動作します。各 <pre><code> 要素をハイライト済みの生 HTML で置き換えるため、構造化された <pre> 要素を読む必要があるプラグインはより前に実行される必要があります。

補足

• ハイライトはビルド時にすべて Rust で処理されます。Shiki、Prism などの JS ハイライターはビルド時にも配信時にも実行されません。デュアルテーマの切り替えも純粋な CSS（出力されたカスタムプロパティに対する light-dark()）で行われるため、JS は不要です。

• カラースキーム設定の shikiTheme フィールドは無関係で、ビルド出力には影響しません。これはデザイントークンパネルのカラースキームエンベロープに含まれる名残りのフィールド（zdtp 0.2.3 以降はオプショナル）であり、パネルの Shiki プレビューは no-op スタブです。