Code Blocks

What you get for free

Any fenced code block in your MDX gets three things automatically — no imports, no wrapper components, no config.

Writing code blocks

Standard markdown fences with a language tag. The language tag drives both the syntax highlighter and the badge.

```typescript
export function greet(name: string): string {
  return `Hello, ${name}!`;
}
```

Produces:

export function greet(name: string): string {
  return `Hello, ${name}!`;
}

Supported languages

The Prism grammar set is loaded client-side on docs sites. Current set:

Grouping multiple languages

Use <CodeGroup> to show the same code in different languages with tabs. See the CodeGroup component docs.

Theme integration

Syntax colors are not hard-coded. Prism token classes (.token.keyword, .token.string, etc.) are mapped to --docs-* CSS variables in prose-docs, so the highlighting:

• Automatically adapts to the reader's light/dark theme choice

• Uses your tenant primary color for keywords

• Uses your configured success/warning colors for strings and numbers

• Stays subtle (Linear-style muted hues, not a "christmas tree" explosion)

Copy button behavior

The copy button sits in the top-end corner of every code block. It is hidden until the reader hovers over the block (or focuses it via keyboard), then reveals. Clicking copies the raw code (without the language tag or badge) to the system clipboard via the Clipboard API. On success the icon swaps to a checkmark for ~2 seconds.