Skip to navigation

让 Markdown 步入
组件时代

MDX 是一种书写格式,允许你在 Markdown 文档中无缝地插入 JSX 代码。 你还可以导入(import)组件,例如交互式图表或弹框,并将它们嵌入到 你所书写的内容当中。 这让利用组件来编写较长的内容成为了一场革命。 🚀 继续阅读 »

New: MDX 2!

经过数年的努力开发,MDX 2 版本正式发布了,新版本带来了很多 改进。 下面划重点:

  • 📝 改进语法 让 JSX 中插入 markdown 更容易
  • 🧑‍💻 JavaScript 表达式{2 * Math.PI} 转换为 6.283185307179586
  • 🔌 新集成了 esbuildRollupNode.js
  • ⚛️ 支持所有 JSX 运行时: React、Preact、Vue、Emotion,以及你能叫上来名字的,都被支持
  • 🌳 改进的 AST 暴露了更多详细信息
  • 🏃‍♀️ 编译速度至少提升 25%
  • 🚴 生成的代码运行速度是原来的两倍 (提速 100%
  • 🚄 @mdx-js/mdx 打包后的体积比原来的三分之一还少 (减少了 250%
  • 🧵 还有很多,很多……

继续阅读 »

MDX 有什么用?

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

example.mdx
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" />

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

Last year’s snowfall

In 2018, 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)、框架和编辑器。 无论是 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.

@chrisbiscardi