组件速查

这一页用来快速对照本站可用的 MDX 组件与代码块写法。 写新文档时直接复制片段即可。

Callout

四种语义颜色，常用于警告与提示。

Tabs

在页面里切换不同写法或语言。

Steps

分步骤教程，自带圆形数字。

pnpm install

pnpm sync:lark

NODE_OPTIONS="--max-old-space-size=8192" pnpm dev

Cards

引导用户进入下一站，支持 icon / description / 外链。

Files

可视化展示目录结构，适合"项目长这样"这类介绍。

Accordion

折叠常见问题或冗长说明。

TypeTable

API 参数表，常配合 TS 类型一起出现。

代码块标注

借助 Shiki transformer，可以在围栏代码块里直接写 [!code highlight] 等注释。

function greet(name: string) {
  console.log("hi"); 
  console.log(`你好，${name}`); 
  return name.toUpperCase(); 
}

聚焦某一段（其他行模糊）：

const a = 1;
const b = 2; 
const c = 3; 
const d = 4;

包管理器自动 Tab

围栏语言写 npm，构建时自动展开为 npm / pnpm / yarn / bun 四个 Tab，且选择会跨页面记住。

npm install fumadocs-ui

数学公式

行内：当 $n \to \infty$，调和级数 $\sum_{k=1}^{n} \frac{1}{k}$ 趋向无穷。

块级：

Mermaid 图

数据图表（Recharts）

适合在分享会数据、调研结果、项目趋势这类场景用。组件位于 components/charts/examples.tsx，作者写自己的图表时可参考它们。

折线图：访问 / 注册增长

柱图：分享会主题分布

饼图：主题占比

面积图：每月提交

雷达图：兴趣维度

TypeScript Twoslash

代码块语言后加 twoslash 即可触发悬浮类型提示。鼠标停在标识符上能看到推断出的类型，// ^? 还会就地展开。

// 来自 lib/shared.ts
const gitConfig = {
  user: 'NJUPT-SAST',
  repo: 'sast-nextsig-docs',
  branch: 'master',
} as const;

type GitUser = typeof gitConfig.user;
      
type GitUser = "NJUPT-SAST"

function repoUrl(c: typeof gitConfig) {
  return `https://github.com/${c.user}/${c.repo}`;
}

const url = repoUrl(gitConfig);
     
const url: string

内嵌 TOC

文档非常长时可以在中段插一个内嵌目录，让读者快速跳转。

import { InlineTOC } from 'fumadocs-ui/components/inline-toc';

<InlineTOC items={toc} />

ImageZoom

所有 Markdown 图片都被自动包成可点击放大的形式。

![Cloudflare Tunnel 示意](/lark-media/example.png)