MDX 使用示例：让文档变成可复用的页面

MDX 将 Markdown 的可读性与 JSX 的可组合性合在一起，让内容既能写得快，又能长得像产品。

MDX 的核心优势

1. 内容和组件同一处维护：文档里直接用 UI 组件，避免在说明里贴一大堆长得不像产品的截图。
2. 结构化与可复用：组件可复用、可组合，维护时不必到处复制粘贴。
3. 表达力更强：列表、表格、代码、提示块、按钮、卡片都能在一篇文档里共存。
4. 样式一致性：统一的组件体系保证风格一致，不会出现文档与站点割裂的问题。

下面的内容会同时演示 Markdown 与 MDX 组件的混排效果。

一段快速示例（Markdown + JSX）

## 这是一个标题
 
<Callout type="tip" title="提示">
  这是一段可以直接渲染的组件内容。
</Callout>
 
<Button variant="outline">立即试用</Button>

MDX 还允许你在正文中插入表达式，比如：2 + 3 = {2 + 3}。

组件展示区

1. Callout 信息块

2. Kbd 键盘提示

当你需要表达快捷键时，可以这样写：Cmd + K 或 Ctrl + S。

3. Badge 与 Button

4. Cards + CardLink（卡片导航）

5. ButtonLink（可直接跳转的按钮）

常用 Markdown 语法仍然可用

列表

• 任务清单
• 需求说明
• 版本日志

表格

代码块

export function Hero() {
  return (
    <section className="space-y-4">
      <h1 className="text-3xl font-semibold">用组件表达内容</h1>
      <p className="text-muted-foreground">MDX 让文档像页面一样可控</p>
    </section>
  )
}

适合使用 MDX 的场景

• 产品文档：需要统一视觉与结构的内容
• 设计系统：展示组件与用法的规范说明
• 博客/文章：希望文章具备强表达力与品牌一致性