Syntax Highlighting

作成 2026年5月28日更新 2026年7月24日Takeshi Takatsudo

zudo-doc のカラースキームに追従する、ビルド時のセマンティッククラス方式ハイライト。

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

概要

すべてのコードフェンスブロックは、zfb のネイティブなクラス方式ハイライターによってビルド時に処理されます。ハイライト済みの HTML は SSR 出力に直接埋め込まれるため、ブラウザ側の JavaScript は不要です。

テーマ

zfb は pre.hi-root の配下に hi-kw、hi-str、hi-num、hi-com などのセマンティッククラスを出力します。zudo-doc は --zfb-hi-* CSS ブリッジを通して、それらを --zd-syntax-* デザイントークンへ対応付けます。そのため、アクティブなカラースキームを切り替えると、ページの再ビルドやクライアント側ハイライターなしで既存のコードも再配色されます。

この契約はパッケージが所有します。生成プロジェクトの zfb.config.ts にレンダラーやテーマ名の設定ブロックは出力されません。

対応言語

開始フェンスに言語識別子を指定します。

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

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

const greeting: string = "hello";

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

出力マークアップ

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

<pre class="hi-root">
  <code><span class="hi-kw">const</span> <span class="hi-var">greeting</span> …</code>
</pre>

Code Title 機能と組み合わせると、<pre> は .code-block-container div の中にラップされます。UI に表示されるコピーボタンと折り返しボタンはクライアントサイドの JavaScript で注入され、すべてのコードブロックに自動的に追加されます — オプトインの Code Enrichment 機能（diff/行/単語ハイライト装飾のみを追加します）とは独立しています。

処理順序

シンタックスハイライターは、コードブロックの構造が準備された後に zfb のビルドパイプラインで実行されます。構造化された <pre><code> を注釈する機能は、クラス方式の出力が確定する前に実行されます。

コードタイトル、コピー／折り返しコントロール、行／単語の強調、差分マーカー、タブ／コードグループ、Mermaid、プレーンフォールバックは、それぞれ独立した構造機能です。別のトークンパレットを持ち込むことはありません。

共有ランタイム契約

HtmlPreview のソースパネルは、ブラウザ実行時に @takazudo/zfb-md-wasm レンダラーを使用しますが、同じ pre.hi-root / hi-* の語彙を出力し、同じシンタックスデザイントークンを使用します。WASM モジュールは、ソースパネルを開いたとき（または defaultOpen で最初から表示するとき）にだけ読み込まれます。カラースキームの変更やシンタックストークンの編集では、どちらのレンダラーも再実行せず、既存 DOM の色だけが変わります。

テーマ名方式からの移行

現行の zudo-doc プロジェクトでは、codeHighlight.themeLight / themeDark の設定、--shiki-* 変数の利用、HtmlPreview 用 Shiki のインストールは不要です。アップグレード時には、これらのプロジェクト所有の設定とパレット規則を削除してください。既存のカラースキームは互換性を保ちます。スキーム固有の上書きがなければ、各シンタックスロールは既存のセマンティックカラーを継承します。詳しくは Color — シンタックスセマンティクスを参照してください。

補足

ドキュメントのフェンスにはセマンティッククラスが出力され、パレット色のインライン指定は含まれません。
ビルド時と HtmlPreview のハイライトはいずれも zfb のレンダラーを使用します。Shiki はランタイム依存でも peer dependency でもありません。

GitHub でソースを見る