# CodeBlock

`` wraps a shiki-rendered `<pre>` with the docs-template
header bar: a language chip, an optional filename, a `:set nu`
line-number toggle, and a copy button. You rarely use it directly —
**every fenced code block in MDX gets it automatically** via the `pre`
mapping in the MDX component map.

## Automatic usage (fenced blocks)

````mdx
```ts file="site.config.ts"

```
````

renders as:

```ts file="site.config.ts"

```

The `file="…"` meta string becomes the filename chip; the fence
language becomes the language chip. Both are extracted by the shiki
config inside [`dockit()`](/reference/exports.md).

## Direct usage

For code you render outside MDX (or source you already have as a
string), compose it yourself:

```tsx

  <pre><code>echo hello</code></pre>

```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | — | A `<pre><code>` tree (usually shiki output). |
| `filename` | `string` | — | Filename chip in the header bar. |
| `lang` | `string` | — | Language chip. Auto-forwarded from the fence language in MDX. |

## Behavior notes

- **The header bar only renders when `filename` is set.** Without a
  `file="…"` meta string, the language chip, line-number toggle, and
  copy button float in the top-right corner and reveal on hover (or
  keyboard focus) instead — compare the two fenced blocks above.
- The line-number toggle is **site-wide** state
  ([`useLineNumbers`](/reference/exports.md)) — flipping it in one block flips
  every block, including the Source tabs of
  [``](/reference/components/preview.md) frames.
- Copy grabs the text content of the inner `<code>` element.
- Colors come from the shiki dual theme (github-light / github-dark)
  and follow the site theme with no re-render — see
  [Theming](/guides/theming.md).