代码块

在文档中添加代码块

config.js

import createMDX from 'fumadocs-mdx/config';

const withMDX = createMDX();

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

export default withMDX(config);

显示代码块，默认添加。

复制按钮
自定义标题和图标

使用方法

将 pre 元素包装在 <CodeBlock /> 中，它作为代码块的包装器。

卡片

在 MDX 文档中使用卡片组件

标题

MDX 文档的标题组件

代码块

在文档中添加代码块

config.js

import createMDX from 'fumadocs-mdx/config';

const withMDX = createMDX();

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

export default withMDX(config);

显示代码块，默认添加。

复制按钮
自定义标题和图标

使用方法

将 pre 元素包装在 <CodeBlock /> 中，它作为代码块的包装器。

卡片

在 MDX 文档中使用卡片组件

标题

MDX 文档的标题组件

保留背景

使用由 Shiki（Rehype Code 插件）生成的背景颜色。

import { Pre, CodeBlock }

图标

通过向 CodeBlock 组件传递 icon 属性来指定自定义图标。

默认情况下，图标将由自定义 Shiki 转换器注入。

config.js

console.log('js');

from

'fumadocs-ui/components/codeblock'

;

<MDX

components={{

// HTML `ref` attribute conflicts with `forwardRef`

pre: ({ ref: _ref, ...props }) => (

<Pre>{props.children}</Pre> {}

</CodeBlock>

),

}}

/>;

from

'fumadocs-ui/components/codeblock'

;

<MDX

components={{

pre: ({ ref: _ref, ...props }) => (

<Pre>{props.children}</Pre>

</CodeBlock>

),

}}

/>;

代码块

使用方法

目录

代码块

使用方法

目录

保留背景

图标