e47a9f4401
- 2.1: packs/ -> archive/packs/ - 2.2: site/ -> archive/site/ - 2.3: src/lab/ -> archive/lab/ - 2.4: examples/ -> archive/examples-legacy/ (SSI-based)
1.5 KiB
1.5 KiB
| title | description | section | prev-url | prev-title | next-url | next-title | type | date | tags | ai-disclosure | ai-model | ai-provider | |||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Diff | Render structured diffs with line-level semantic markup — added, removed, context, hunk. | notes | status/ | Status | session/ | Session Log | notes | 2026-04-09 |
|
generated | claude-sonnet-4-5 | Anthropic |
Overview
Use data-diff on a <pre> block to render a structured diff. Child elements carry line-level semantics.
<pre data-diff>
<span data-line="hunk">@@ -12,7 +12,9 @@</span>
<span data-line="context"> function greet(name) {</span>
<span data-line="removed">- return "Hello " + name;</span>
<span data-line="added">+ const greeting = `Hello, ${name}!`;</span>
<span data-line="added">+ return greeting;</span>
<span data-line="context"> }</span>
</pre>
Line Types
| Value | Meaning |
|---|---|
hunk |
Hunk header (@@ ... @@) — muted, italic |
context |
Unchanged surrounding line — default text |
removed |
Deleted line — red background, - prefix |
added |
New line — green background, + prefix |
Inline Diffs
For single-value changes in prose, use data-diff directly on <del> and <ins>:
<p>
Latency changed from
<del data-diff="removed">240ms</del>
to
<ins data-diff="added">18ms</ins>
after the index rebuild.
</p>
Notes
The data-diff block expects monospace rendering. ASW applies font-family: var(--asw-font-mono) automatically — no additional class needed.