Fumadocs 语法与组件大全
集中展示 Markdown、MDX、代码高亮、交互组件、文件树和属性表等常用能力。
这个页面用于验证当前 React Router + Vite + Fumadocs 项目支持的主要写作语法和 UI 组件。
标准 Markdown
引用块适合放置定义、结论或来自其他资料的内容。
- 无序列表
- 支持嵌套项目
- 支持 Markdown 格式
- 适合整理并列知识点
- 第一步：创建 MDX 文件
- 第二步：加入
meta.json - 第三步：提交并自动部署
| 能力 | 写法 | 当前状态 |
|---|---|---|
| GFM 表格 | Markdown 表格 | 可用 |
| 自动链接 | 直接书写 URL | 可用 |
| 任务列表 | - [x] | 可用 |
| MDX 组件 | JSX 标签 | 可用 |
- React Router 静态构建
- Cloudflare Pages 部署
- Fumadocs 静态搜索
- Copy Markdown 与 Open 菜单
标题、目录与锚点
标题会自动出现在右侧目录中，并自动生成可复制的锚点链接。
自定义锚点
这一节的地址固定为 #custom-anchor。
不显示在目录中的标题
这一标题仍会显示在正文中，但不会加入右侧目录。
Callout 提示框
信息
用于补充背景、术语和非阻塞说明。
成功
类型检查、静态构建和 Pages 部署可以在同一个工作流中完成。
注意
最后更新时间依赖完整 Git 历史，因此 Actions 使用 fetch-depth: 0。
错误
适合展示会导致构建失败、数据丢失或行为异常的问题。
想法
可以把实验性方案、优化方向和延伸阅读放在这里。
代码块
标题与行号
export function PageActions() {
const enabled = true;
return enabled ? <div>Copy Markdown</div> : null;
}高亮、增删与聚焦
const framework = 'React Router';
const oldTheme = 'colorful';
const newTheme = 'monochrome';
const deployment = 'Cloudflare Pages';
console.log(deployment); 代码标签组
pnpm install
pnpm devNPM 安装命令
npm install fumadocs-core fumadocs-ui fumadocs-mdxTabs 标签页
pnpm dev启动 React Router 开发服务器。
Accordions 折叠面板
Steps 步骤组件
编写内容
使用 Markdown、MDX 和 Fumadocs 组件编写页面。
本地检查
运行 pnpm types:check 和 pnpm build。
合并部署
Pull Request 验证通过后合并到 main，工作流自动发布生产站点。
Files 文件树
mdx.ts
docs.tsx
search.ts
layout.shared.tsx
shared.ts
source.ts
app.css
routes.ts
index.mdx
components.mdx
test.mdx
meta.json
react-router.config.ts
source.config.ts
TypeTable 属性表
Prop
Type
数学与技术排版
当前项目已经启用 remark-math 与 KaTeX，可在技术文档中编写行内公式和块级公式。
行内公式：$a^2+b^2=c^2$
块级公式：
$$
T(n)=2T(n/2)+n
$$页面级实用功能
每篇文档顶部现在包含：
- Copy Markdown：复制处理后的 Markdown 文本；
- Open：打开 GitHub 源文件、Markdown 版本或 AI 工具；
- 文档切换器：在快速开始、组件示例与长文档之间切换；
- Last updated on：根据该文件最后一次 Git 提交显示日期；
- GitHub 图标：位于左侧栏底部，可直接进入仓库。