MDX 让你能在 Markdown 格式的内容中插入 JSX 代码。 你还可以导入(import)组件,例如交互式图表或弹窗,并将它们嵌入到 你所书写的内容当中。 这让使用组件来编写长篇内容变得非常轻松。 🚀 继续阅读 »
新闻:MDX 3 发布了!
这次的主版本升级并没有带来太多变化,不过仍然值得期待! 这次的升级主要是放弃了对旧版 Node 的支持(请使用 16 或更高版本吧)、为 MDX 添加了对 ES2024 的支持、在 MDX 中支持 await
语法(如果你所用的框架也支持的话)以及 删除了几个已经废弃的参数。
MDX 有什么用?
你可以通过 JSX 在 markdown 中嵌入组件:
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" />
我们制作了一个交互式的练习工具,你可以利用这个工具尝试 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