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
Wrap the pre element in <CodeBlock />, which acts as the wrapper of code block.
import { Pre, CodeBlock } from 'fumadocs-ui/components/codeblock';
<MDX
components={{
// HTML `ref` attribute conflicts with `forwardRef`
pre: ({ ref: _ref, ...props }) => (
<CodeBlock {...props}>
<Pre>{props.children}</Pre>
</CodeBlock>
),
}}
/>;
See Markdown for usages.
Use the background color generated by Shiki (the Rehype Code plugin).
import { Pre, CodeBlock } from 'fumadocs-ui/components/codeblock';
<MDX
components={{
pre: ({ ref: _ref, ...props }) => (
<CodeBlock keepBackground {...props}>
<Pre>{props.children}</Pre>
</CodeBlock>
),
}}
/>;
Specify a custom icon by passing an icon prop to CodeBlock component.
By default, the icon will be injected by the custom Shiki transformer.
