Skip to navigation

让 Markdown 步入
组件时代

MDX 让你能在 Markdown 格式的内容中插入 JSX 代码。 你还可以导入(import)组件,例如交互式图表或弹窗,并将它们嵌入到 你所书写的内容当中。 这让使用组件来编写长篇内容变得非常轻松。 🚀 继续阅读 »

新闻:MDX 3 发布了!

这次的主版本升级并没有带来太多变化,不过仍然值得期待! 这次的升级主要是放弃了对旧版 Node 的支持(请使用 16 或更高版本吧)、为 MDX 添加了对 ES2024 的支持、在 MDX 中支持 await 语法(如果你所用的框架也支持的话)以及 删除了几个已经废弃的参数。

继续阅读 »

MDX 有什么用?

你可以通过 JSX 在 markdown 中嵌入组件:

example.mdx
import {Chart} from './snowfall.js'
export const year = 2023

# 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" />

上述代码被编译成 JavaScript,你就可以在任何支持 JSX 的框架中 使用了:

Last year’s snowfall

In 2023, the snowfall was above average. It was followed by a warm spring which caused flood conditions in many of the nearby rivers.

我们制作了一个交互式的练习工具,你可以利用这个工具尝试 MDX 并看到 转换后的结果。 在线工具 »

入门

MDX 支持大部分的打包工具(bundlers)、框架和编辑器。 无论是 Docusaurus、Next.js 或 Vite。 也无论是 Rollup、esbuild 或 webpack。 更无论是 React、Preact 或 Vue。 继续阅读 »

MDX 优点汇总

  • ❤️ 强大: MDX 将 markdown 和 JSX 语法完美地融合在一起,完美地适配 基于 JSX 的项目
  • 💻 一切皆组件: 在 MDX 中使用现有组件, 并且能将其它 MDX 文件当作组件导入(import)
  • 🔧 可自定义: 可以指定每个 markdown 指令 ({h1: MyHeading}) 用哪个组件来渲染
  • 📚 基于 Markdown: 保留了 markdown 的简洁和优雅, 需要时也能信手拈来 JSX
  • 🔥 非常非常快: MDX 没有运行时的开销,所有编译都发生在 构建阶段

lol mdx is so good

@dan_abramov