CodeBlock

<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"
import { initDocs } from '@dreamlake/dockit'
```

renders as:

site.config.tsts

import { initDocs } from '@dreamlake/dockit'

The file="…" meta string becomes the filename chip; the fence language becomes the language chip. Both are extracted by the shiki config inside dockit().

Direct usage

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

tsx

import { CodeBlock } from '@dreamlake/dockit'

<CodeBlock filename="example.sh" lang="bash">
  <pre><code>echo hello</code></pre>
</CodeBlock>

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) — flipping it in one block flips every block, including the Source tabs of <Preview> 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.