Ludo
15a6db9c0e
- vault → notes (PKM-exported content) - posts → articles (short-form, no TOC) - papers → essays (long-form, with TOC) - type: post → type: article (posts are just short articles) - layouts/paper → layouts/essay - 08a-paper.css → 08a-essay.css - CSS: fix redundant li resets, remove role="main" from article, replace <small> prev/next labels, add console layout - Update hugo.toml menus, internal URLs, front matter throughout - Add docs/context.md, docs/css-refactor-plan.md
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.