MDX 文件格式详解

什么是 MDX 文件？

MDX 是一种结合了 Markdown 与 JSX（JavaScript XML） 的文件格式。 它允许你在 Markdown 文档中直接嵌入可交互的 React 组件，非常适合用于文档网站、博客系统或组件库说明。

MDX 的典型用途

• 静态站点生成器（如 Gatsby、Next.js、Docusaurus）中的动态文档
• 技术博客中嵌入交互式示例（如图表、代码沙盒）
• 组件文档中展示可运行的 UI 示例
• 教学材料中结合说明文字与实时演示

MDX 文件结构示例

一个简单的 .mdx 文件可能如下所示：

{`# 欢迎使用 MDX

这是一个普通的 Markdown 段落。

<Counter />

上面是一个 React 组件，将在渲染时变为可交互的计数器。`}

如何编辑 MDX 文件？

你可以使用任何文本编辑器（如 VS Code）编写 MDX 文件。 推荐安装 MDX 语法高亮插件以获得更好的开发体验。 若需预览效果，通常需要在支持 MDX 的框架（如 Next.js）中运行项目。

常见问题

MDX 和 Markdown 有什么区别？

Markdown 仅支持静态文本格式，而 MDX 允许嵌入 JSX 组件，实现动态内容。

MDX 文件扩展名是什么？

标准扩展名为 .mdx。