MDX 简介 - Markdown 和 JSX 的完美结合

mdx.js

Markdown

Markdown Guide

markdown 我们都很熟悉，是一种轻量级标记语言，常用于编写文档、博客、说明文档等。

JSX

Introducing JSX – React

JSX 我们也很熟悉，是一种 JavaScript 语法扩展，可以在 JavaScript 中编写 HTML 标签。

markdown 里也可以也 HTML 标签，但它能不能直接使用 JSX 语法呢？答案是可以的，这就是 MDX 的由来。

MDX

MDX 是一种 Markdown 扩展语法，允许在 Markdown 文件中嵌入 JSX 代码。这使得 Markdown 文件可以包含动态内容，例如 React 组件。MDX 由 John Otander 创建，最初是为了在 Gatsby 网站中使用。现在，MDX 已经成为一个独立的项目，并在许多其他静态网站生成器中得到支持。

让 Markdown 步入组件时代 | MDX中文文档 | MDX中文网

MDX 2.0

现在MDX 已经发展到 3.0 版本，支持了许多新的特性，放弃了对旧版 Node 的支持（使用 16 或更高版本），在 MDX 中添加了对 ES2024 的现代支持，在 MDX 中支持 await（如果你的框架也支持 await），并删除了几个过时的选项。

Markdown for the component era | MDX

MDX 3.0

代码示例

下面是一个简单的 MDX 文件示例，其中包含了一个 React 组件：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


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 文件可以包含任何 React 组件，这使得 MDX 文件可以包含交互式内容、动画、图表等。

原本用 markdown 来简化 HTML 的书写，失去了一些交互性，现在可以使用 JSX 来补充这一点。

MDX 优点

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

MDX 用途

跟 markdown 一样，MDX 也可以用于编写文档、博客文章、演示文稿等。下面是一些常见的用途和相关的优秀项目：

📝 博客文章： MDX Blog
📖 文档： shuding/nextra-docs-template: Nextra docs template 很多文档网站都在使用这个模板，如 Mojo：面向AI开发者的编程语言 | mojopy.com
🎨 演示文稿： jxnblk/mdx-deck: ♠️ React MDX-based presentation decks
🌐 静态站点生成器：类似博客，这个太多，如 Charge — an opinionated, zero-config static site generator

更多有趣的项目可以在 mdx-js/awesome: A curated list of awesome MDX resources 找到。