A readable, selectable source surface with optional file identity, semantic syntax color, line reference, and Copy. Inline Code still names one identifier; Code block presents a complete expression or file excerpt.
The header is compositional: add filename, language, and Copy only when they help. Line numbers stay hidden for short examples and appear when surrounding content refers to lines.
import { Button } from "@/components/ui";export default function Page() { return <Button intent="primary">Deploy</Button>;}Copy changes to a check on success and announces the result. Line numbers are shown here for source reference; the highlighted fourth line is attention, not a diff.
Highlight, addition, and removal are separate meanings. Diff lines pair semantic color with a start rule and generated mark, so color never carries the change alone.
const radius = 8;const radius = 12;// Highlight is neutral attention.| Axis | Default | Alternative | Boundary |
|---|---|---|---|
| Frame | Framed | --plain | Plain only when a parent already owns the surface and inset |
| Line numbers | Hidden | --line-numbers | Show when prose, review, or errors refer to lines |
| Inline scroll | Self | --host-scroll | Host is for a parent region that owns both scroll axes |
| Verdict | Rule |
|---|---|
| Do | Pre-render escaped highlighting into the semantic token classes while preserving exact text and reading order. |
| Do | Use optional filename, language, and Copy for a source artifact; omit the header for a small contextual example. |
| Do | Keep generated numbers and diff marks out of selection and copied source. |
| Don’t | Wrap long lines or add a component max-height; the host owns vertical measure. |
| Don’t | Build language switching, line linking, collapse, or Open in v0 into the base component; those are product compositions. |