Code blocks

Add syntax-highlighted code with titles, line annotations, diffs, focus states, and copy controls.

Usage

Use a fenced code block with its language identifier. Code blocks are syntax highlighted with Shiki and include a copy button by default.

export function greeting(name: string) {
  return `Hello, ${name}!`
}

Title

Add title after the language identifier to label a file or command. The title appears in the code block header.

src/lib/greeting.ts

export function greeting(name: string) {
  return `Hello, ${name}!`
}

Copy control

Code blocks are copyable by default. Add noCopy when a block is only for reference.

This value is shown for context and has no copy button.

Line numbers

Add lineNumbers to expose line-number metadata, or provide a starting number with lineNumbers=12.

src/lib/greeting.ts

export function greeting(name: string) {
  return `Hello, ${name}!`
}

Highlight lines

Put a [!code highlight] comment on the line immediately before the code you want to emphasize. The annotation is removed from the rendered block.

export function greeting(name: string) {
  const message = `Hello, ${name}!`
  return message
}

Highlight words

Put [!code word:…] on the line before the matching code. Add :N to limit the highlight to the next N lines.

const primaryButton = createButton("primary")
const primaryLink = createLink("primary")

Focus lines

Put [!code focus] immediately before a line to de-emphasize the surrounding code and keep attention on that next line.

const config = createConfig()
config.set("theme", "dark")
saveConfig(config)

Diff

Use [!code --] for removed lines and [!code ++] for added lines. Put an annotation immediately before the affected line; add :N to apply it to that line and the next N - 1 lines.

export function formatName(name: string) {
  return name.toLowerCase()
  return name.trim().toLowerCase()
}

Supported metadata

Metadata	Example	Effect
`title`	`tsx title="src/app.ts"`	Shows a label in the header.
`noCopy`	`bash noCopy`	Hides the copy button.
`lineNumbers`	`tsx lineNumbers`	Adds line-number metadata.
`lineNumbers=N`	`tsx lineNumbers=12`	Adds line-number metadata beginning at `N`.

For related files or alternative implementations, use Code groups instead of a single code block.