LogoMkSaaS文档
LogoMkSaaS文档
首页

介绍

快速入门什么是 Fumadocs对比

设置

手动安装静态导出

写作

Markdown国际化

UI

概览主题搜索
组件
MDX
提示框卡片代码块标题
X (Twitter)
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 /> 中,它作为代码块的包装器。

import { Pre, CodeBlock } 










有关用法,请参见 Markdown。

保留背景

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

import { Pre, CodeBlock } 









图标

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

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

config.js
console.log('js');

卡片

在 MDX 文档中使用卡片组件

标题

MDX 文档的标题组件

目录

使用方法
保留背景
图标
from
'fumadocs-ui/components/codeblock'
;
<MDX
components={{
// HTML `ref` attribute conflicts with `forwardRef`
pre: ({ ref: _ref, ...props }) => (
<CodeBlock {...props}>
<Pre>{props.children}</Pre> {}
</CodeBlock>
),
}}
/>;
from
'fumadocs-ui/components/codeblock'
;
<MDX
components={{
pre: ({ ref: _ref, ...props }) => (
<CodeBlock keepBackground {...props}>
<Pre>{props.children}</Pre>
</CodeBlock>
),
}}
/>;