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
58 lines
1.5 KiB
Markdown
58 lines
1.5 KiB
Markdown
---
|
|
title: "Diff"
|
|
description: "Render structured diffs with line-level semantic markup — added, removed, context, hunk."
|
|
section: notes
|
|
prev-url: "status/"
|
|
prev-title: "Status"
|
|
next-url: "session/"
|
|
next-title: "Session Log"
|
|
type: notes
|
|
date: 2026-04-09
|
|
tags: ["notes", "diff", "reference"]
|
|
ai-disclosure: "generated"
|
|
ai-model: "claude-sonnet-4-5"
|
|
ai-provider: "Anthropic"
|
|
|
|
---
|
|
|
|
## Overview
|
|
|
|
Use `data-diff` on a `<pre>` block to render a structured diff. Child elements carry line-level semantics.
|
|
|
|
```html
|
|
<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>`:
|
|
|
|
```html
|
|
<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.
|