MDX

让 Markdown 步入组件时代

MDX 是一种书写格式，允许你在 Markdown 文档中无缝地插入 JSX 代码。 你还可以导入（import）组件，例如交互式图表或弹框，并将它们 嵌入到内容当中。 这使得用组件编写较长的内容形成了 一场冲击 🚀。

试一试

# Hello, *world*!
以下是一个 Markdown 中嵌入 JSX 的示例。 <br /> **试着改变
背景色吧！**
<div style={{ padding: '20px', backgroundColor: 'tomato' }}>
  <h3>This is JSX</h3>
</div>

❤️ 强大： MDX 将 markdown 和 JSX 语法混合在一起并完美地 融入基于 JSX 的项目当中。

💻 一切皆组件： 导入（import） JSX 组件并 在 MDX 文档中直接渲染它们。

🔧 可定制： 为每一个 markdown 元素决定用哪个组件渲染。 渲染。

📚 基于 Markdown： Markdown 的简洁和优雅依然得到了保存， 只须在需要时才混入 JSX 。

🔥 超级超级快： MDX 没有运行时，所有的编译都发生在 构建阶段。

“It’s extremely useful for using design system components to render markdown and weaving interactive components in with existing markdown.”

— @chrisbiscardi

为什么？

在 MDX 出现之前，将 JSX 与 Markdown 混合书写时，Markdown 的优势就不存在了。 通常采是用基于模板字符串的方式，因此就需要大量的 转义和繁琐的语法。

MDX 试图让书写 Markdown 和 JSX 更简单、更具 表现力。当你将组件 （甚至可以是动态的或需要加载数据的组件）与 Markdown 混合书写时，编写较长的内容又会变得 很有趣。

观看部分特色功能的实际效果