Skip to navigation

组件时代的
Markdown

MDX 允许你在 Markdown 内容中使用 JSX。 你可以导入交互式图表或警报等组件,并将它们嵌入到你的内容中。 这使得使用组件编写长篇内容变得非常有趣。 🚀 继续阅读 »

新: 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,看看它会变成什么样子。 运行 »

开始使用

大多数打包器、框架和编辑器都有集成。 无论你是使用 Docusaurus、Next.js 还是 Vite 进行构建。 你更喜欢 Rollup、esbuild 或 webpack。 你正在使用 React、Preact 或 Vue。 开始使用 »

MDX 简而言之

  • ❤️ 强大: MDX 混合了 markdown 和 JSX 语法,完美适合基于 JSX 的项目
  • 💻 一切皆为组件: 使用 MDX 中的现有组件并将其他 MDX 文件导入为组件
  • 🔧 可定制: 决定为每个 markdown 构造渲染哪个组件 ({h1: MyHeading})
  • 📚 基于 Markdown: Markdown 的简单和优雅仍然存在,只有当你想要时才使用 JSX
  • 🔥 快如闪电: MDX 没有运行时,所有编译都发生在构建阶段

哈哈 mdx 太棒了

@dan_abramov

MDX 中文网 - 粤ICP备13048890号