Code Block

Demo File

import createMDX from 'fumadocs-mdx/config';

const withMDX = createMDX();

/** @type {import('next').NextConfig} */
const config = {
  reactStrictMode: true, 
};

export default withMDX(config);

Display code blocks, required by default.

Syntax highlighting powered by Shiki
Copy button
Custom Titles

Usage

Wrap the pre element in <CodeBlock />, which acts as the wrapper of code block.

import { Pre, CodeBlock } from 'fumadocs-ui/components/codeblock';

<MDX
  components={{
    pre: ({ ref: _ref, title, ...props }) => (
      <CodeBlock title={title}>
        <Pre {...props} />
      </CodeBlock>
    ),
  }}
/>

Highlight Lines

You spectify highlighted lines by adding [!code highlight].

```tsx
<div>Hello World</div>  // [!code highlight]
<div>Hello World</div>
<div>Goodbye</div>
<div>Hello World</div>
```

Highlight Words

You can highlight a specific word by adding [!code word:<match>].

```js
// [!code word:config]
const config = {
  reactStrictMode: true,
};
```

Title

Add title="x" to the codeblock meta.

```js title="next.config.js"
console.log('Hello World');
```

Usage

Highlight Lines

Highlight Words

Title

On this page