Code Block
Displaying Shiki highlighted code blocks
import createMDX from 'fumadocs-mdx/config';
const withMDX = createMDX();
/** @type {import('next').NextConfig} */
const config = {
reactStrictMode: true,
};
export default withMDX(config);Install to your codebase
Easier customization & control.
npx @fumadocs/cli@latest add codeblockThis is a MDX component meant to be used with Rehype Code to display highlighted codeblocks. You can refer to Markdown for the syntax of writing 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.
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) {
return {
...defaultComponents,
// HTML `ref` attribute conflicts with `forwardRef`
pre: ({ ref: _ref, ...props }) => (
<CodeBlock {...props}>
<Pre>{props.children}</Pre>
</CodeBlock>
),
...components,
} satisfies MDXComponents;
}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.
console.log('js');How is this guide?