コードブロック

作成 2026年5月4日更新 2026年6月15日Takeshi Takatsudo

タイトル、行ハイライト、差分表示に対応した、syntectによるシンタックスハイライト付きフェンスドコードブロック。

zudo-docのフェンスドコードブロックは、ビルド時にzfbエンジンが実行するRust製のシンタックスハイライタsyntectによってハイライトされます。開始フェンスの後に言語識別子を指定するとハイライトが有効になります。

基本的な使い方

トリプルバッククォートでコードを囲み、開始フェンスの後に言語識別子を追加します。

function add(a: number, b: number): number {
  return a + b;
}

```ts
function add(a: number, b: number): number {
  return a + b;
}
```

サポートされている言語

syntectは多くの言語を標準でサポートしています。主な識別子は以下の通りです：

言語	識別子
TypeScript	`ts`, `typescript`
JavaScript	`js`, `javascript`
HTML	`html`
CSS	`css`
JSON	`json`
Bash / Shell	`bash`, `sh`, `shell`, `zsh`
Markdown	`md`, `markdown`
MDX	`mdx`
YAML	`yaml`, `yml`
Python	`python`, `py`
Rust	`rust`, `rs`
Go	`go`
SQL	`sql`
GraphQL	`graphql`
Diff	`diff`
TOML	`toml`
JSX / TSX	`jsx`, `tsx`

認識できない言語識別子が指定された場合は、ハイライトされない素のコードブロックとしてレンダリングされます。コンテナのスタイル、コピーボタン、折り返しトグルはそのまま動作します。

コードブロックのタイトル

titleメタ属性を追加すると、コードブロックの上にファイル名やラベルを表示できます。

src/utils/math.ts

export function multiply(a: number, b: number): number {
  return a * b;
}

```ts title="src/utils/math.ts"
export function multiply(a: number, b: number): number {
  return a * b;
}
```

差分表示

diff言語を使用すると、+と-のプレフィックスで追加・削除行をハイライト表示できます。

- const greeting = "Hello";
+ const greeting = "Hello, world!";
  console.log(greeting);

```diff
- const greeting = "Hello";
+ const greeting = "Hello, world!";
  console.log(greeting);
```

ネストされたコードブロック

MDXの例の中にフェンスドコードブロックを表示する必要がある場合は、外側のフェンスに4つのバッククォートを使用し、内側のブロックには3つを使用します。

````mdx
```ts
const x = 1;
```
````

シンタックスハイライトのテーマ

ビルド時のハイライタは syntect で、デュアルテーマモードで設定されています（zfb.config.ts の codeHighlight.themeLight/themeDark — base16-ocean.light / base16-ocean.dark）。各トークンの2色は --shiki-light / --shiki-dark の CSS カスタムプロパティとして出力され（インラインの color:#hex ではありません）、スタイルシートが light-dark() で解決します。これによりコードは、クライアントサイドの JavaScript なしでアクティブなライト/ダークテーマに追従します。

カラースキームの shikiTheme フィールドはこれとは無関係で、レンダリング結果には影響しません。これは zdtp パネル（@takazudo/zdtp）のカラースキームエンベロープに含まれる名残りのフィールド（zdtp 0.2.3 以降はオプショナル）です。パネルがコードを再ハイライトすることはありません。Shiki 連携は no-op スタブです。

GitHub でソースを見る