コードブロックのエンリッチメント

フェンス付きコードブロックに diff マーカー、行ハイライト、語句強調を追加する。

codeEnrichment 機能は、コードブロックに対する 3 つのインタラクティブな拡張を追加します:

diff マーカー — // [!code ++]／// [!code --] コメントで、追加・削除された行を注釈する。
行ハイライト — フェンスの情報文字列に {1,3-5} のような範囲を追加して、特定の行をハイライトする。
語句強調 — /answer/ のようなメタデータで指定した表示テキストを .highlighted-word で囲む。

3 つの挙動はすべて、syntect ハイライターの後に hast フェーズのビジターとして実行され、それが出力する行単位の <span class="line"> 構造を操作します。参照: rehype-pretty-code。

有効化

// zfb.config.ts
export default defineConfig({
  markdown: {
    features: {
      codeEnrichment: {},
    },
  },
});

diffMarkers、lineHighlight、wordHighlight は、機能を有効化すると デフォルトでオン になります。いずれかを個別に無効化するには:

codeEnrichment: {
  diffMarkers: false,   // disable diff-marker processing
  lineHighlight: true,
  wordHighlight: true,
},

diff マーカー

行末のコメントとして // [!code ++] または // [!code --] を追加します。マーカーコメントは表示出力からは取り除かれます。対応する <span class="line"> には data-line-diff="added" または data-line-diff="removed" が付与されます。

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

これらのデータ属性を CSS で使って、diff をスタイリングします:

span.line[data-line-diff="added"]   { background: rgba(0, 255, 0, 0.1); }
span.line[data-line-diff="removed"] { background: rgba(255, 0, 0, 0.1); }

サポートされるコメントスタイル: //（JS/TS/Rust）、#（Python/Ruby/Shell）、--（SQL/Lua）。

行ハイライト

フェンスの情報文字列で、言語識別子の後に波括弧で囲んだ範囲を追加します。一致した行の <span class="line"> には data-line-highlight="true" が付与されます。

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

1、3、4、5 行目に data-line-highlight="true" が付きます。CSS でスタイリングします:

span.line[data-line-highlight="true"] { background: rgba(255, 255, 0, 0.1); }

範囲の構文がサポートするもの:

単一の番号: {3}
範囲: {3-5}（両端を含む）
組み合わせ: {1,3-5,8}

語句強調

フェンスの情報文字列に、スラッシュで囲んだリテラル語句を 1 つ以上追加します。表示コード内の重ならないすべての一致が <span class="highlighted-word"> で囲まれます:

```js /answer/ /path\/name/
const answer = "path/name";
```

.highlighted-word {
  background: rgba(255, 255, 0, 0.2);
}

語句内のスラッシュは \/ とエスケープします。一致対象はシンタックスハイライト後のタグや HTML エンティティ文字列ではなく、デコードされた表示テキストです。語句が複数のトークンをまたいでも、各トークンの class と inline style は保持されます。

一致は左から右に選ばれます。表示テキスト上の開始位置が最も早い一致が優先され、同じ位置ならフェンス内のメタデータで先に書かれた表現が優先されます。空、不正、または閉じられていない表現は無視されます。

拡張を組み合わせる

すべての subfeature は独立して動作するため、同時に適用できます:

```js {2} /x/
const x = 1;const x = 2;
```

1 行目は data-line-diff="added"（diff マーカー）を受け取り、2 つの x は .highlighted-word で囲まれます。2 行目は data-line-highlight="true"（ハイライト範囲）を受け取ります。

コードブロックのエンリッチメント

有効化

diff マーカー

行ハイライト

語句強調

拡張を組み合わせる

Revision History