Code blocks

Use fenced code blocks to show commands, configuration, and snippets in your docs. Wrap content in triple backticks and add an optional language tag for syntax highlighting. Every block gets a header with the language label and a copy button.

There is no <CodeBlock /> component; standard Markdown fences are all you need. Line numbers are not supported.

```js
export async function apiRequest(options) {
  const response = await fetch(options.url);
  return response.json();
}
```

export async function apiRequest(options) {
  const response = await fetch(options.url);
  const data = await response.json();
  return data;
}

```js
export async function apiRequest(options) {
  const response = await fetch(options.url);
  const data = await response.json();
  return data;
}
```

Add a language identifier immediately after the opening backticks. docs.page uses Shiki for highlighting and accepts any bundled Shiki language or alias, for example js, ts, bash, or json.

If the tag is missing or unrecognized, the block renders as plain text.

npm install docs.page

```bash
npm install docs.page
```

Add title="..." to the opening fence line to show a label beside the language in the block header. Use double quotes, single quotes, or an unquoted value.

console.log("Hello World");

```js title="Logging: Hello World"
console.log("Hello World");
```

The header shows the language, a divider, then the title, for example js | Logging: Hello World.

Shiki notation transformers add diff markers, line highlights, and focus effects. Add a comment at the end of each annotated line using the // [!code …] pattern. Use your language's comment syntax, for example # in Python or <!-- in HTML.

Show removed and added lines in a single block:

console.log('hewwo') 
console.log('hello') 
console.log('goodbye')

Add // [!code --] for removed lines and // [!code ++] for added lines:

```js
console.log('hewwo') // [!code --]
console.log('hello') // [!code ++]
console.log('goodbye')
```

Call out important lines with a background highlight:

console.log('hello') 
console.log('world')

Add // [!code highlight] at the end of the line:

```js
console.log('hello') // [!code highlight]
console.log('world')
```

Dim surrounding lines to draw attention to one or more lines:

console.log('Not focused');
console.log('Focused') 
console.log('Not focused');

Add // [!code focus] at the end of the line:

```js
console.log('Not focused');
console.log('Focused') // [!code focus]
console.log('Not focused');
```

Each code block includes a copy button in the header. Click it to copy the raw fence content to the clipboard. The icon switches to a check mark for two seconds to confirm the copy.

Readers copy source text, including annotation comments, not the rendered HTML.

• Code group: tabbed blocks for multiple languages or variants
• Components overview: when to use tabs, code groups, and accordions