Code Block

Syntax-highlighted code blocks with copy button and title support.

Docstra features a powerful CodeBlock component with syntax highlighting, line numbers, and copy-to-clipboard functionality.

Usage

Standard Markdown code blocks are automatically enhanced — just use triple backticks as usual.

Basic code block
```ts title="example.ts" copy
const message: string = 'Hello, Docstra!';
console.log(message);
```

Meta Options

You can pass meta options directly after the opening backticks:

Option	Example	Description
`title`	`title="example.ts"`	Displays a filename/title bar at the top
`copy`	`copy`	Adds a copy-to-clipboard button

Examples

With title and copy button

With title and copy
```ts title="utils.ts" copy
export function greet(name: string) {
  return `Hello, ${name}!`;
}
```

Shell commands

Terminal example
```bash title="Terminal" copy
npx create-docstra-app@latest
cd my-docs
pnpm dev
```

Multiple languages

Docstra supports syntax highlighting for all major languages via Shiki, including ts, tsx, js, jsx, bash, md, json, css, html, and more.

Custom Code Block Component

If you want to use the DocstraCodeBlock component directly:

mdx-components.tsx
import { defaultMdxComponents } from 'docstra/mdx';
import { DocstraCodeBlock } from 'docstra';
 
export function getMDXComponents() {
    return {
        ...defaultMdxComponents,
        code: DocstraCodeBlock,
    };
}

The DocstraCodeBlock is already wired up via defaultMdxComponents, so you typically don't need to do this manually unless you want to override or extend it.

How is this guide?

Last updated on March 30, 2026

Callout

File Tree