MDX 作者使用说明
2026-06-02 10:00:00 • 15min
本站文章由 MDX + 自定义组件 渲染，写法对齐 TanStack docs-info。本文即完整作者指南，可在站内直接预览效果。
1. 单文件代码块
围栏第一行写语言，可选 title 作为顶栏文件名（有 title 只显示文件名，无 title 显示语言名）：
export function Button({ label }: { label: string }) {
return <button>{label}</button>;
}2. 多 Tab 代码（::start:tabs）
不要手写 <CodeGroup>。用注释块书写，构建时自动展开为 Tab 代码 UI。
2.1 多文件（variant="files"）
2.2 包管理器（variant="package-manager"）
块内每行：框架: 包名。mode 可选 install（默认）、dev-install、create、local-install、custom。
2.3 构建工具分段（variant="bundler"）
用 # Vite、# Rsbuild 等标题分段，每段下放围栏。
各 Tab 命令不一致时（如 pnpm dev / npm run dev），同样用 variant="files" + 多个 bash title="pnpm" 围栏。
3. Callout（GitHub Alert）
推荐小写类型：
也可直接写 JSX：<Callout type="tip" title="标题">正文</Callout>。
普通 > 引用（无 [!type]）渲染为左侧细线 blockquote，不是 Callout。
4. 步骤条（Steps）
安装依赖
在项目根目录执行：
pnpm install启动开发服务
pnpm dev浏览器访问本地地址即可。
安装依赖
在项目根目录执行：
pnpm install5. 折叠块（Details）
可选：默认收起的补充说明
这里是折叠正文，适合踩坑记录、冗长配置、次要说明。
默认展开
加 open 时首次渲染为展开状态。
也可写 JSX：<Details summary="标题" open>正文</Details>。
6. GFM 表格
特点：
7. 其他 MDX 组件
文内可直接使用站点已有组件，例如 <VideoEmbed />、<CardLink />、<Image /> 及 interesting 栏目下的演示组件（<GhostAnimation /> 等）。
8. 围栏语言
js / ts / tsx / py / go / rust / bash 等会映射到 Shiki；别名如 py→python。完整列表见 src/app/utils/modules/shiki-lang.ts。