MDX 文件格式详解

什么是 MDX 文件？

MDX 是一种将 Markdown 与 JSX（React 的语法扩展）结合的文件格式。 它允许你在 Markdown 文档中直接嵌入可交互的 React 组件，非常适合用于构建现代化的文档网站、博客或组件库说明。

MDX 的核心特点

• 保留 Markdown 的简洁语法（如标题、列表、代码块等）
• 支持在文档中直接使用 React 组件
• 适用于 Gatsby、Next.js、Docusaurus、VitePress 等现代前端框架
• 提升技术文档的交互性和表现力

简单示例

// example.mdx
# 欢迎使用 MDX

这是一个普通的 Markdown 段落。

<Counter /> <!-- 这里嵌入了一个 React 组件 -->
      

如何编辑 MDX 文件？

你可以使用任何文本编辑器（如 VS Code）打开和编辑 .mdx 文件。 若需预览效果，建议搭配支持 MDX 的开发环境（如 Next.js + @next/mdx 插件）。

常见用途

1. 技术文档站点（如开源项目文档）
2. 交互式博客文章
3. 组件库的示例展示页面
4. 教学材料中的可运行代码演示