Usage
In most cases you should write code with plain markdown fences — they're shorter and the platform's code block features (syntax highlighting, copy button, language badge) work automatically.
```typescript
const x = 1;
```Use <CodeBlock> only when you need an explicit JSX element with a title prop instead of relying on metastring parsing — for example, in computed/dynamic content or when wrapping inside another component that doesn't preserve fence metadata.
<CodeBlock title="server.ts" language="typescript">
{`const app = createServer();
app.listen(3000);`}
</CodeBlock>const app = createServer();
app.listen(3000);When to prefer fences
| Markdown fences | <CodeBlock> | |
| Syntax | Short — ```ts | Verbose — <CodeBlock language="ts"> |
| Title | ```ts title="x.ts" | title="x.ts" prop |
| Multiline | Native | Requires template literal |
| Inside CodeGroup | Works as a fence child | Works the same way |
| Recommended for | 95% of cases | Edge cases only |
If you're writing prose-and-code documentation, use fences. If you're computing code dynamically (e.g. inside a custom React component) or composing inside something that needs explicit elements, use <CodeBlock>.
Props
| Prop | Type | Description |
language | string | Syntax highlighter language identifier |
title | string | Optional title shown in the language badge slot |
children | ReactNode | Code content (typically a string template literal) |