# 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

<StoryEmbed slug="code" />

## Syntax

````md title="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 title="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

| Prop              | Type      | Default       | Description                    |
| ----------------- | --------- | ------------- | ------------------------------ |
| `code`            | `string`  | —             | Source code (required)         |
| `language`        | `string`  | —             | Shiki language (required)      |
| `fileName`        | `string`  | —             | Header above the code          |
| `theme`           | `string`  | `github-dark` | Shiki theme                    |
| `showLineNumbers` | `boolean` | `true`        | Line numbers in the gutter     |
| `autoFit`         | `boolean` | `true`        | Smaller font for long snippets |

### CodeGroup

| Prop   | Type                          | Default | Description         |
| ------ | ----------------------------- | ------- | ------------------- |
| `tabs` | `{ label, language, code }[]` | —       | One tab per snippet |

## In other formats

<FormatSupport />