什么是 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。