`codeEnrichment` 機能は、フェンスコードブロックに行・単語単位の注釈（diff マーカー、行ハイライト、単語ハイライト）を付与します。シンタックスハイライトの後に hast フェーズのビジターとして動作するため、すでにトークン化された `<span class="line">` の出力を処理します。

:::note[オプトイン機能]

この機能はデフォルトで無効です。`zfb.config.ts` の `codeEnrichment` キーで有効化します。オブジェクト型の機能であるため、オプションオブジェクト（`{}` またはフィールド）を渡す必要があります — `true` のショートハンドは受け付けません。

:::

:::note[タイトルバーは別の常時有効な機能です]

タイトル付きフェンスの上に表示されるファイル名/タイトルバー（`.code-block-container` / `.code-block-title`）は、`codeEnrichment` とは別の、常時有効なコア機構によるものです。`codeEnrichment` を有効にしているかどうかに関わらずレンダリングされます。[Code Title](https://zudo-doc.takazudomodular.com/ja/docs/markdown-features/code-title) を参照してください。

:::

## 設定

```ts title="zfb.config.ts"
export default defineConfig({
  markdown: {
    features: {
      codeEnrichment: {},
    },
  },
});
```

3 つの拡張機能（diff マーカー、行ハイライト、単語ハイライト）はすべてデフォルトで有効です。それぞれ個別に無効化できます。

```ts title="zfb.config.ts"
codeEnrichment: {
  diffMarkers: false,
  lineHighlight: true,
  wordHighlight: true,
}
```

## Diff マーカー

行末に `// [!code ++]` または `// [!code --]` コメントを追加します。マーカーは出力から除去され、その行には `data-line-diff` 属性（`added` または `removed`）が付与されます。

```js title="diff-demo.js"
const unchanged = 1;
const removed = 2; // [!code --]
const added = 3; // [!code ++]
```

対応するコメントスタイルは言語に合わせます: `//`（JavaScript/TypeScript/Rust）、`#`（Python/Ruby/Shell）、`--`（SQL/Lua）。

## 行ハイライト

フェンスの情報文字列に波括弧区切りの範囲を追加します。一致した行には `data-line-highlight="true"` 属性が付与されます。

```js title="highlight-demo.js"
const a = 1;
const b = 2;
const c = 3;
const d = 4;
const e = 5;
```

上のフェンスは次のように記述されています。

````md
```js {1,3-5}
const a = 1;
const b = 2;
const c = 3;
const d = 4;
const e = 5;
```
````

対応する範囲構文: 単一の数値（`{3}`）、両端を含む範囲（`{3-5}`）、それらの組み合わせ（`{1,3-5,8}`）。

## 単語ハイライト

フェンスの情報文字列に、空白区切りの `/フレーズ/` 式を追加します。ブロック内でそのフレーズが可視テキストとして出現するすべての箇所が `.highlighted-word` スパンでラップされ、一致範囲の境界でもシンタックスハイライトのマークアップは保持されます。

```js title="word-demo.js" /answer/
const answer = 42;
console.log(answer);
```

上のフェンスは次のように記述されています。

````md
```js title="word-demo.js" /answer/
const answer = 42;
console.log(answer);
```
````

複数の式はスペース区切りで指定します（`/first/ /second phrase/`）。フレーズ内のリテラルなスラッシュは `\/` でエスケープします（`/path\/name/`）。不正な形式や閉じられていない式は黙って無視されます。

## コピーボタンと折り返しボタン

コピーボタンと単語折り返しの切り替えボタンは実行時にクライアントサイド JavaScript で追加されるため、サーバーレンダリングされた HTML には含まれません。これは `codeEnrichment` の設定有無にかかわらず、ハイライト済みのすべてのコードブロックに対して無条件に実行されます。ハイドレーション後のコピーボタンのマークアップは `button.code-btn.code-btn-copy` で、その中に `svg.code-icon.code-icon-copy` を含みます。

単語折り返しはブロック単位ではなく**ページ全体**の設定です。いずれかの折り返しボタンを切り替えるとページ上のすべてのコードブロックが折り返され、その選択はブラウザのタブセッション中（`sessionStorage`、キーは `zudo-doc-code-wrap`）記憶されるため、リロードしても維持されます。折り返しボタンが表示されるのは内容が実際にはみ出しているブロックだけで、すでに収まっているブロックには折り返しの有無にかかわらず表示されません。

## 出力 DOM

| トリガー | 出力される要素 | クラス名 |
| --- | --- | --- |
| Diff マーカー行 | `<span class="line" data-line-diff="added\|removed">` | `span.line[data-line-diff]` |
| ハイライト行 | `<span class="line" data-line-highlight="true">` | `span.line[data-line-highlight]` |
| 単語の一致 | 一致した可視テキストをラップ | `.highlighted-word` |