Diff

Render structured diffs with line-level semantic markup — added, removed, context, hunk.

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.