Code blocks

Inline code#

Use `docs.json` for site configuration.

Fenced code blocks#

Use triple backticks and a language tag for syntax highlighting. Every block gets a copy button automatically.

\`\`\`javascript
function hello(name) {
  console.log('Hello', name);
}
\`\`\`

Common language tags: bash, json, javascript, typescript, tsx, python, yaml, md, mdx, text.

How highlighting works#

rehype-highlight tokenizes fenced blocks at build time. Highlight.js's GitHub theme ships with the Shiso framework, and fenced code elements are rendered by Shiso's CodeBlock component, which adds the copy control.

Code groups#

Use CodeGroup when readers should switch between related snippets — for example package managers or languages. An optional label after the language tag becomes the tab name. See Components for the full component list.

Live MDX components#

MDX lets you render docs components inside a page, including next to code:

<Card title="Live example">This card is rendered from MDX.</Card>

Back to Writing content overview.