让 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.