Skip to navigation

组件时代的
Markdown

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

¥MDX lets you use JSX in your markdown content. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast. 🚀 Continue reading »

新：MDX 3！

¥New: MDX 3!

这次是小版本，没什么大更新，有时候也不错！这主要是放弃了对旧 Node 的支持（使用 16 或更高版本），在 MDX 中添加现代 ES2024 支持，在 MDX 中支持 await（如果你的框架也支持），并删除了几个已弃用的选项。

¥A small major this time, nothing big, which is also nice sometimes! This mainly drops support for old Node (use 16 or later), adds modern ES2024 support in MDX, supports await in MDX (if your framework does too), and removes several deprecated options.

继续阅读 »

¥Continue reading »

MDX 是做什么的？

¥What does MDX do?

你可以通过 JSX 使用嵌入式组件编写 Markdown：

¥You write markdown with embedded components through JSX:

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 的框架中使用它：

¥It gets compiled to JavaScript that you can use in any framework that supports 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，看看它会变成什么样子。运行 »

¥We made an interactive playground where you can try MDX out and see what it turns into. Play »

开始使用

¥Get started

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

¥There are integrations for most bundlers, frameworks, and editors. Whether you build with Docusaurus, Next.js, or Vite. You prefer Rollup, esbuild, or webpack. You’re using React, Preact, or Vue. Get started »

MDX 简而言之

¥MDX in short

  • ❤️ 强大的：MDX 混合了 markdown 和 JSX 语法，完美适合基于 JSX 的项目

    ¥❤️ Powerful: MDX blends markdown and JSX syntax to fit perfectly in JSX-based projects

  • 💻 一切都是一个组件：使用 MDX 中的现有组件并将其他 MDX 文件导入为组件

    ¥💻 Everything is a component: Use existing components in your MDX and import other MDX files as components

  • 🔧 可定制：决定为每个 markdown 构造渲染哪个组件 ({h1: MyHeading})

    ¥🔧 Customizable: Decide which component is rendered for each markdown construct ({h1: MyHeading})

  • 📚 基于 Markdown：Markdown 的简单和优雅仍然存在，只有当你想要时才使用 JSX

    ¥📚 Markdown-based: The simplicity and elegance of markdown remains, you use JSX only when you want to

  • 🔥 速度极快：MDX 没有运行时，所有编译都发生在构建阶段

    ¥🔥 Blazingly blazing fast: MDX has no runtime, all compilation occurs during the build stage

哈哈 mdx 太棒了

¥lol mdx is so good

— @dan_abramov

MDX 中文网 - 粤ICP备13048890号