Code-block enrichment

Add diff markers, per-line highlighting, and word emphasis to fenced code blocks.

The codeEnrichment feature adds three interactive code-block enrichments:

1. Diff markers — annotate added/removed lines via // [!code ++] / // [!code --] comments.

2. Line highlighting — highlight specific lines by adding a range like {1,3-5} to the fence info-string.

3. Word emphasis — wrap visible code phrases named by metadata such as /answer/ in .highlighted-word.

All three behaviors run as a hast-phase visitor after the syntect highlighter, operating on the per-line <span class="line"> structure it emits. Reference: rehype-pretty-code.

Enable

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

diffMarkers, lineHighlight, and wordHighlight are on by default when the feature is enabled. To disable any subfeature independently:

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

Diff markers

Add // [!code ++] or // [!code --] as a comment at the end of a line. The marker comment is stripped from the visible output. The matching <span class="line"> receives data-line-diff="added" or data-line-diff="removed".

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

Use these data attributes in CSS to style the 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); }

Supported comment styles: // (JS/TS/Rust), # (Python/Ruby/Shell), -- (SQL/Lua).

Line highlighting

Add a brace-delimited range after the language identifier in the fence info-string. Matching lines receive data-line-highlight="true" on their <span class="line">.

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

Lines 1, 3, 4, and 5 get data-line-highlight="true". Style them in CSS:

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

The range syntax supports:

• Single numbers: {3}

• Ranges: {3-5} (inclusive)

• Combinations: {1,3-5,8}

Word emphasis

Add one or more slash-delimited literal phrases to the fence info-string. Every non-overlapping occurrence in the visible code text is wrapped in <span class="highlighted-word">:

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

Use the stable class in CSS:

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

The slash in a phrase is escaped as \/. Matching uses the decoded visible code text, not serialized syntax-highlight tags or HTML entities. Syntax token classes and inline styles remain on the text inside the wrapper, including when one phrase crosses multiple syntax tokens.

Matches are selected from left to right. The earliest visible-text start wins; when expressions start at the same position, their order in the fence metadata wins. Empty, malformed, and unterminated expressions are ignored.

Combining enrichments

All subfeatures work independently, so the same line can use them together:

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

Line 1 gets data-line-diff="added" (diff marker), both x occurrences get .highlighted-word, and line 2 gets data-line-highlight="true" (highlight range).