Code Block

config.js

import createMDX from 'fumadocs-mdx/config';
 
const withMDX = createMDX();
 
/** @type {import('next').NextConfig} */
const config = {

  reactStrictMode: true,
};
 
export default withMDX(config);

Display code blocks, added by default.

Syntax highlighting powered by Shiki
Copy button
Custom titles and icons

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>
    ),
  }}
/>

Icons

You can specify a custom icon by passing an icon prop to CodeBlock component.

By default, the icon will be injected by the custom Shiki transformer automatically.

config.js

console.log('js');

config.ts

console.log('ts');

document.md

# Hello World!

main.rs

fn main() {
    println!("Hello World!");
}

component.tsx

<MDXContent>Hello World</MDXContent>

style.css

.nd-codeblock {
  color: red;
}

Usage

Icons

On this page