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);

This is a MDX component to be used with Rehype Code to display highlighted codeblocks.

Supported features:

Copy button
Custom titles and icons

If you're looking for an equivalent with runtime syntax highlighting, see Dynamic Code Block.

Usage

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

mdx-components.tsx

import defaultComponents from 'fumadocs-ui/mdx';
import type { MDXComponents } from 'mdx/types';
import { CodeBlock, Pre } from 'fumadocs-ui/components/codeblock';
 
export function getMDXComponents(components?: MDXComponents): MDXComponents {
  return {
    ...defaultComponents,
    // HTML `ref` attribute conflicts with `forwardRef`
    pre: ({ ref: _ref, ...props }) => (
      <CodeBlock {...props}>
        <Pre>{props.children}</Pre>
      </CodeBlock>
    ),
    ...components,
  };
}

See Markdown for usages.

Keep Background

Use the background color generated by Shiki.

import { Pre, CodeBlock } from 'fumadocs-ui/components/codeblock';
 
<CodeBlock keepBackground {...props}>
  <Pre>{props.children}</Pre>
</CodeBlock>;

Icons

Specify a custom icon by passing an icon prop to CodeBlock component.

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

config.js

console.log('js');

Usage

Keep Background

Icons

On this page