CodeBlock: no per-line add/remove (diff) backgrounds — highlightLines is single-accent only
- Dominant language
- TypeScript
- Stars
- 13k
- Forks
- 1.1k
- Avg merge
- 1d 15h
- Merged PRs (30d)
- 690
Description
## Problem
Builders showing config/code changes need green/red line washes, and CodeBlock can't provide them. `highlightLines` paints every listed line with the single neutral accent (`--color-accent-muted`) — there is no way to mark a line as *added* or *removed*.
Evidence:
- An internal-tool builder (Meridian) hand-tinted lines with manual green/red styling because `highlightLines` only offers the neutral accent — bypassing the design system entirely for a presentation concern CodeBlock already half-owns.
- The ChatToolCalls diff-display template is an in-repo consumer that would use this immediately for tool-call before/after code display.
## API arbitration (compact round, 2026-07-01, naive sonnet generations + haiku probe)
| Candidate | Result |
| --- | --- |
| (a) `highlightLines` extended to `Array` | 0 invented props, 0 escapes, exact usage |
| (b) separate `diffLines: {added: number[], removed: number[]}` | 0 invented props, 0 escapes |
| (c) `language="diff"` auto-parse | Agent embedded `+`/`-` prefixes and `@@` hunk headers INTO the code string — conflates content with presentation; the copy button would copy the markers |
Probe against the **current** API: the agent invented `addedLines` / `removedLines` props, confirming the demand pull for per-line diff semantics.
**Verdict:** extend `highlightLines` — backward compatible, one prop owns line accents. `diffLines` is the runner-up (also clean, but splits line-accent ownership across two props).
## Proposed API
```tsx
interface CodeBlockProps {
/**
* 1-indexed lines to accent. Plain numbers (and type: 'highlight')
* keep today's neutral accent; 'add' / 'remove' render green/red
* diff washes.
*/
highlightLines?: Array<
number | {line: number; type?: 'add' | 'remove' | 'highlight'}
>;
}
```
```tsx
```
Plain numbers keep today's neutral accent — fully backward compatible, no behavior change for existing callers.
## Theming note
The add/remove washes must be theme-aware tokens (they need to work in light/dark and under SyntaxTheme backgrounds), not raw green/red. The theme already carries the wash pair used by Banner/FieldStatus: `--color-success-muted` and `--color-error-muted` (both `light-dark()` translucent pairs, same family as the `--color-accent-muted` the current highlight uses). Translucency matters so the wash composes over `--color-syntax-background` in either scheme.
Contributor guide
Assessment
This issue has not been assessed yet.