Code Blocks

Code is a first-class citizen. Fenced blocks are syntax-highlighted with Shiki, themed for light/dark, and get a copy button for free.

A basic fenced block

```ts
const universe = 1
device.patch(universe, 0x01)
```

renders as:

const universe = 1
device.patch(universe, 0x01)

Available languages

Highlighting is enabled for this set — stick to it or the block falls back to plain text:

bash diff json js ts html css vue shell mdc md yaml

Filename label

Add [filename] after the language for a titled block (the icon is inferred from the extension):

```ts [server/utils/supabase.ts]
export function resolveRole(claims) {
  return claims.app_role ?? 'user'
}
```

export function resolveRole(claims) {
  return claims.app_role ?? 'user'
}

Highlight specific lines

Add {lines} — single lines and ranges, comma-separated:

```ts [auth.ts]{2,4-5}
function gate(role) {
  if (role !== 'admin') {      // highlighted
    return allow()
  }
  return redirect('/login')    // highlighted
}                              // highlighted
```

function gate(role) {
  if (role !== 'admin') {      // highlighted
    return allow()
  }
  return redirect('/login')    // highlighted
}                              // highlighted

Inline code with highlighting

:code[const x = 1]{lang="ts"} renders highlighted inline → const x = 1.

Tabbed code groups

::code-group turns several blocks into tabs — perfect for npm/pnpm or multi-language examples. The tab label comes from each block's [filename].

::code-group
```bash [npm]
npm install
```
```bash [pnpm]
pnpm install
```
```bash [yarn]
yarn
```
::

npm install

pnpm install

yarn

Collapsible code

Long listings can start collapsed with ::code-collapse:

::code-collapse
```ts [nuxt.config.ts]
export default defineNuxtConfig({
  // …imagine 200 lines of config…
  modules: ['docus', 'nuxt-studio'],
})
```
::

export default defineNuxtConfig({
  // …imagine 200 lines of config…
  modules: ['docus', 'nuxt-studio'],
})

File trees

::code-tree shows a multi-file block as a navigable file explorer — give each block a [path]:

::code-tree{default-value="content.config.ts"}
```ts [content.config.ts]
export default defineContentConfig({ /* … */ })
```
```ts [nuxt.config.ts]
export default defineNuxtConfig({ /* … */ })
```
::

export default defineContentConfig({ /* … */ })

AI prompt block

::prompt presents a ready-to-copy AI prompt with copy / "open in editor" actions — handy for "ask the assistant" call-outs. The visible label is the description; the default slot is the text that actually gets copied.