Code Enrichment

シンタックスハイライトの後、フェンスコードブロックに diff/行/単語ハイライト装飾を追加します。

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

設定

export default defineConfig({
  markdown: {
    features: {
      codeEnrichment: {},
    },
  },
});

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

codeEnrichment: {
  diffMarkers: false,
  lineHighlight: true,
  wordHighlight: true,
}

Diff マーカー

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

const unchanged = 1;
const removed = 2;const added = 3;

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

行ハイライト

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

const a = 1;
const b = 2;
const c = 3;
const d = 4;
const e = 5;

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

```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 スパンでラップされ、一致範囲の境界でもシンタックスハイライトのマークアップは保持されます。

const answer = 42;
console.log(answer);

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

```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