Code blocks

Inline code#

Use single backticks for short identifiers and commands:

Use `docs.json` for site configuration.

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);
}
```

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-dark theme ships with the app (src/App.tsx)
• fenced <pre> 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):

<CodeGroup>
  ```bash npm
  npm install
  ```

  ```bash pnpm
  pnpm install
  ```
</CodeGroup>

npm install

An optional label after the language tag (or a title prop on the child) becomes the tab name. See Code Group for details.

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>