Data display Code Block

Components

Code Block

Multi-line code with a header and optional filename.

With header

index.md markdown 
# Field notes

Ship *small*, ship **often**.

- [x] Draft the note in mrkdwn
- [ ] Set the type in buena mono

With line numbers

index.md markdown
1 # Field notes
2
3 Ship *small*, ship **often**.
4
5 - [x] Draft the note in mrkdwn
6 - [ ] Set the type in buena mono

Line features

publish.md highlighted lines
1 # Publishing a note
2 Save the file — that is the release.
3 No build step, no ceremony.
4 The note is live at its slug.
index.md diff
- [x] Draft the note in mrkdwn
- - [ ] Set the type in Helvetica
+ - [x] Set the type in buena mono
- [ ] Publish 
Ship *small*, ship **often** —
no filename, just the block.

Language switcher

publish.ts 
export const publish = (note: Note) => save(note);

The switcher prop adds a dropdown of language variants (options, value, onChange).

Tabs & Open in v0

index.ts index.js 
import { publish } from "./publish";

tabs renders the variants as tabs instead of a dropdown; v0="ask" or "build" adds the Open in v0 toolbar button.

Referenced lines

publish.md L2 referenced
1 # Publishing a note
2 Save the file — that is the release.
3 No build step, no ceremony.

Line numbers are anchor links — clicking one creates a reference to that line (here L2 is highlighted as the referenced target).

Markdown for agents: /design/code-block.md · spec: /design.md