Copy page

Content

Code

Fenced code blocks are highlighted with Shiki at compile time. A title adds a file name header, and :::code-group turns several blocks into accessible tabs.

Live demo

Syntax

Markdown
```ts title="recit.config.ts"
export default defineConfig({})
```

:::code-group
```bash title="pnpm"
pnpm add -D @recit/cli
```
```bash title="npm"
npm install -D @recit/cli
```
:::

MDX
<CodeBlock
  language="ts"
  fileName="recit.config.ts"
  code={`export default defineConfig({})`}
/>

<CodeGroup
  tabs={[
    { label: "pnpm", language: "bash", code: "pnpm add -D @recit/cli" },
    { label: "npm", language: "bash", code: "npm install -D @recit/cli" },
  ]}
/>

• title="…" (or [label]) adds a file name header and names the tab in a code group.
• Markdown code blocks are highlighted at build time with syntaxHighlighting.themes of recit.config.ts, in both modes. <CodeBlock> highlights on the client with a single theme, the dark one of that pair by default.
• In MDX, <CodeBlock> and <CodeGroup> highlight code on the client.

Attributes and props

CodeBlock

CodeGroup

In other formats

Format	Status	Notes
deck	Available	Rendered in slides, the presenter console and the HTML and PDF exports.
docs	Available	Through <StoryEmbed slug="…" /> in any page of a site.
motion	Available	Animated block in a film.
report	Planned · P6	Section of a paged report.
toon	Planned · P7	Panel of a vertical strip.
book	Planned · P8	Block of a printable chapter.