MDX 功能示例：完整指南

欢迎阅读这个 MDX 示例文件！这里展示了所有可用的功能和组件。

一、基础 Markdown 语法

段落和文本格式

这是普通段落。你可以使用 粗体、斜体、~~删除线~~ 和 行内代码。

列表

无序列表

• 第一项
• 第二项
  • 嵌套项 1
  • 嵌套项 2
• 第三项

有序列表

1. 第一步
2. 第二步
3. 第三步

引用

这是一段引用文字。可以用来突出重要信息或引用他人的话。

可以包含多行内容。

二、代码块

JavaScript 示例

1function greet(name) {
2return `Hello, ${name}!`;
3}
4
5const message = greet('World');
6console.log(message); // 输出: Hello, World!

React 组件示例

1function Counter() {
2const [count, setCount] = useState(0);
3
4return (
5  <div>
6    <p>当前计数: {count}</p>
7    <button onClick={() => setCount(count + 1)}>
8      增加
9    </button>
10  </div>
11);
12}
13
14export default Counter;

TypeScript 示例

1interface User {
2id: number;
3name: string;
4email: string;
5}
6
7function getUser(id: number): Promise<User> {
8return fetch(`/api/users/${id}`)
9  .then(res => res.json());
10}

三、提示框组件

四、卡片组件

多个卡片示例

五、标签和徽章

你可以使用标签来标记内容：

六、图片

使用 Next.js Image 组件

七、表格

| 功能 | 描述 | 状态 | |------|------|------| | 代码高亮 | 支持多种编程语言 | ✅ 已实现 | | 提示框 | 四种类型的提示框 | ✅ 已实现 | | 卡片组件 | 可嵌套的卡片布局 | ✅ 已实现 | | 目录导航 | 自动生成文章目录 | ✅ 已实现 | | 标签系统 | 文章标签展示 | ✅ 已实现 |

复杂表格示例

| 组件名称 | 用途 | 示例 | |---------|------|------| | CodeBlock | 代码高亮显示 | 支持语法高亮和行号 | | Tip | 提示信息 | 支持 info、success、warning、error 四种类型 | | Card | 卡片容器 | 包含 Header、Title、Description、Content 等子组件 | | Badge | 标签徽章 | 支持多种变体样式 | | Separator | 分隔线 | 用于内容分隔 |

八、分隔线

使用分隔线来分隔不同的内容区块：

这是分隔线后的内容。

九、使用 Frontmatter 数据

你可以在 MDX 内容中访问 frontmatter 数据：

• 文章标题：MDX 功能示例：完整指南
• 发布日期：2025-01-15
• 作者：Gemini

十、作者信息

十一、嵌套标题示例

三级标题示例

这是三级标题下的内容。

四级标题示例

这是四级标题下的内容。

另一个三级标题

更多内容...

十二、混合使用

你可以将多个组件组合使用：

1const example = '这是一个在卡片中的代码示例';
2console.log(example);

总结

这个示例文件展示了 MDX 的所有功能：

1. ✅ 基础 Markdown 语法
2. ✅ 代码高亮（CodeBlock）
3. ✅ 提示框（Tip）
4. ✅ 卡片组件（Card）
5. ✅ 标签（Badge）
6. ✅ 图片（Image）
7. ✅ 表格
8. ✅ 分隔线（Separator）
9. ✅ 作者信息（AuthorBio）
10. ✅ 自动目录生成

希望这个示例对你有帮助！