如何生成MDX文件

什么是MDX？

MDX 是一种允许你在 Markdown 中编写 JSX 的格式。它结合了 Markdown 的简洁性和 JSX 的强大功能，广泛用于文档站点、博客系统（如 Next.js、Gatsby）等场景。

手动创建MDX文件

最简单的方式是直接新建一个以 .mdx 为扩展名的文件，并在其中混合使用 Markdown 和 JSX：

// example.mdx
# 欢迎使用 MDX

这是一个普通的段落。

<button onClick={() => alert('Hello from JSX!')}>
  点我弹窗
</button>

将Markdown转换为MDX

如果你已有 Markdown 文件（.md），只需将其重命名为 .mdx 即可开始嵌入 JSX。但注意：原生 Markdown 不支持 JSX，需确保你的构建工具（如 Webpack、Vite）已配置 MDX 支持。

使用工具自动生成MDX

部分静态站点生成器（如 Docusaurus、Next.js + @next/mdx）支持自动处理 MDX 文件。你也可以使用命令行工具或脚本批量转换：

# 示例：使用 Node.js 脚本添加 JSX 到 Markdown
const fs = require('fs');
const markdown = fs.readFileSync('input.md', 'utf8');
const mdx = `import MyComponent from './MyComponent';\n\n${markdown}\n\n<MyComponent />`;
fs.writeFileSync('output.mdx', mdx);

注意事项

• 确保项目中已安装并配置 @mdx-js/loader 或对应插件。
• JSX 标签必须闭合（如 <img /> 而非 <img>）。
• 导出内容时，可通过 export const meta = { ... } 添加元数据。