什么是MDX文件?
MDX 是一种结合了 Markdown 与 JSX(React 的语法扩展)的文件格式。它允许你在 Markdown 文档中直接嵌入可交互的 React 组件,非常适合用于文档站点、博客系统或组件库说明。
MDX文件能做什么?
- 在 Markdown 中使用 React 组件,如图表、按钮、代码演示等。
- 构建现代化的静态网站(如使用 Next.js、Gatsby、Docusaurus 等框架)。
- 提升技术文档的表现力和交互性。
如何创建和使用MDX文件?
1. 安装支持 MDX 的工具链,例如:
@mdx-js/mdx和@mdx-js/react- Next.js + @next/mdx 插件
- Gatsby + gatsby-plugin-mdx
2. 创建一个 .mdx 文件,例如 example.mdx:
{`# 欢迎使用 MDX
这是一个普通的 Markdown 段落。
<Counter /> `}
3. 在你的应用中导入并渲染该 MDX 文件即可。
注意事项
MDX 文件不能直接在浏览器中运行,必须通过构建工具(如 Webpack、Vite)或静态站点生成器进行编译处理。普通文本编辑器可以打开 .mdx 文件,但无法执行其中的组件逻辑。