Code blocks

Fenced code is highlighted during compilation and emitted as static HTML. The copy button changes only its icon after success, preventing text-driven layout shift.

Language and metadata

```ts title="foldocs.config.ts" {2}
export default defineConfig({
  layout: { preset: 'docs' },
})
```

The language selects a Shiki grammar. Metadata can describe a title, emphasized lines, or Twoslash behavior when the compiler highlighter is configured.

Package installation

Use a package-install fence to turn one package list or npm command into synchronized npm, pnpm, Yarn, and Bun tabs. The selected package manager is shared across every installation block and persisted locally.

npm install foldocs foldkit effect

Accessibility

Keep the original source as text in the DOM. Highlighting spans are decorative, and the copy button retains an accessible name after its visual icon changes.