highlightCode プレイグラウンド

zfb の直接的な意味クラス方式シンタックスハイライトをブラウザで試します。

highlightCode は Markdown のフェンスを使わず、ソースコードへ zfb の意味ロールを直接 付与します。サンプルを実行するか、独自のソースを貼り付けて生成された HTML を確認できます。

クラスモードの意味的ハイライト

クラスモードでは、各トークンに hi-kw や hi-str のような意味クラスが付与されます。サイトの デザイントークン用スタイルシートがロールを現在のライトまたはダークテーマへ対応付けるため、 ハイライト済みソースを変更せずに同じ出力を再テーマ化できます。このプレイグラウンドでは、 レンダリングされた HTML とともに raw HTML も表示します。

これはインラインカラー方式とは異なります。インラインモードは各トークンの HTML に色を記述しますが、 クラスモードでは色の選択を CSS に任せます。highlightCode はクラスモード専用で、language オプションは 必須です。空でない未知の言語ではエスケープ済みのソース出力を維持し、warning の診断を返します。 不正なオプションでは HTML を返さず、error の診断を返します。

ネイティブ zfb との関係

ネイティブ zfb は、フェンス付きコードブロックをハイライトする際、ビルド時に Rust の syntect 設定を 使用します。ブラウザで任意のソースを扱うこの WebAssembly 呼び出しも、同じ系統の同梱文法と意味クラスの モデルを使いますが、最終的な色はホストのスタイルシートに任せます。結果の仕様は API リファレンス、ネイティブパイプラインの設定は シンタックスハイライトガイドを参照してください。