让 Markdown 步入
组件时代
MDX 是一种书写格式，允许你在 Markdown 文档中无缝地插入 JSX 代码。 你还可以导入（import）组件，例如交互式图表或弹框，并将它们嵌入到 你所书写的内容当中。 这让利用组件来编写较长的内容成为了一场革命。 🚀 继续阅读 »
New: MDX 2!
经过数年的努力开发，MDX 2 版本正式发布了，新版本带来了很多 改进。 下面划重点：
- 📝 改进语法 让 JSX 中插入 markdown 更容易
- 🧑💻 JavaScript 表达式 将
{2 * Math.PI}转换为 6.283185307179586 - 🔌 新集成了 esbuild、Rollup 和 Node.js
- ⚛️ 支持所有 JSX 运行时： React、Preact、Vue、Emotion，以及你能叫上来名字的，都被支持
- 🌳 改进的 AST 暴露了更多详细信息
- 🏃♀️ 编译速度至少提升 25%
- 🚴 生成的代码运行速度是原来的两倍 （提速 100%）
- 🚄
@mdx-js/mdx打包后的体积比原来的三分之一还少 （减少了 250%） - 🧵 还有很多，很多……
MDX 有什么用？
你可以通过 JSX 在 markdown 中嵌入组件：
import {Chart} from './snowfall.js'
export const year = 2018
# Last year’s snowfall
In {year}, the snowfall was above average.
It was followed by a warm spring which caused
flood conditions in many of the nearby rivers.
<Chart year={year} color="#fcb32c" />
我们制作了一个交互式的练习工具，你可以利用这个工具尝试 MDX 并看到 转换后的结果。 在线工具 »
入门
MDX 支持大部分的打包工具（bundlers）、框架和编辑器。 无论是 Next.js、Docusaurus 或 Gatsby。 无论是 esbuild、Rollup 或 webpack。 无论是 React、Preact 或 Vue。 继续阅读 »
MDX 优点汇总
- ❤️ 强大： MDX 将 markdown 和 JSX 语法完美地融合在一起，完美地适配 基于 JSX 的项目
- 💻 一切皆组件: 可以将现有的组件使用到 MDX 中，并且可以将其它 MDX 文件作为组件导入（import）
- 🔧 可自定义： 可以为每个 markdown 语法指定一个用于渲染的组件（例如
{h1: MyHeading}） - 📚 基于 Markdown： 保留了 markdown 的简洁和优雅， 你只需在需要时使用 JSX
- 🔥 非常非常快： MDX 没有运行时的开销，所有编译都发生在构建阶段 在构建阶段
It’s extremely useful for using design system components to render markdown and weaving interactive components in with existing markdown.