一切福田，不離方寸，從心而覓，感無不通。

MDX是什么？

MDX（Markdown + JSX）是一种文件格式，它允许你在 Markdown 文档中嵌入 JSX 代码（即带有 XML 语法的 JavaScript）。这种组合使得 MDX 成为了一个强大的工具，特别适合用于编写包含交互式组件和富文本内容的文档或教程。MDX 文件通常以 .mdx 为扩展名。

主要特点

  1. Markdown 和 JSX 的结合：
    • 使用标准的 Markdown 语法来组织文本内容。
    • 在需要的地方插入 React 组件或其他支持 JSX 的框架组件，如 Vue 或 Svelte。
  2. 交互性：
    • 可以直接在文档中添加按钮、图表、表单等交互元素，使文档不仅仅局限于静态内容。
  3. 复用现有组件库：
    • 如果你已经有了一个基于 React 或其他 JSX 支持框架的组件库，可以直接在 MDX 文件中使用这些组件，而不需要额外的转换工作。
  4. 生态系统支持：
    • MDX 拥有一个活跃的社区和丰富的插件生态，可以方便地集成到现有的构建工具链中，例如 Next.js、Gatsby 等静态站点生成器。
  5. 预处理器和编译器：
    • MDX 文件需要通过特定的编译器处理，将其转换为可以在浏览器中执行的 JavaScript 代码。常用的编译器包括 @mdx-js/react 和 remark-mdx。
  6. 样式和支持：
    • 支持 CSS-in-JS 解决方案和其他样式方法，确保你可以对嵌入的组件进行精细的样式控制。

使用场景

  • 文档和教程：编写带有交互示例的开发者文档、API 参考手册和技术博客。
  • 学习平台：创建在线课程和编程教程，其中可以包含实时可编辑的代码示例。
  • 营销页面：构建动态且富有表现力的产品介绍页或案例研究，利用交互组件吸引访客。
  • 内部工具和仪表板：制作包含数据可视化和用户输入的内部报告或管理界面。

示例代码

下面是一个简单的 MDX 文件示例，展示了如何混合使用 Markdown 和 JSX：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Welcome to My MDX Document
 
This is a regular paragraph of text.
 
## Interactive Example
 
Here's an interactive button component:
 
import Button from '../components/Button';
 
<Button onClick={() => alert('Hello, world!')}>Click me</Button>
 
## Code Blocks
 
You can also include code blocks with syntax highlighting:
 
```js
function add(a, b) {
  return a + b;
}

And even inline JSX expressions:

{The sum of 2 and 3 is ${2 + 3}.}

1
2
3
4
5
6
### 如何开始使用 MDX
 
1. **安装依赖**：根据你的项目需求，安装相应的 MDX 编译器和相关插件。例如，在一个 React 项目中，你可以这样做：
 
   ```bash
   npm install @mdx-js/react remark-mdx
  1. 配置构建工具：将 MDX 集成到你的构建工具链中。如果你使用的是像 Next.js 或 Gatsby 这样的静态站点生成器，它们通常已经内置了对 MDX 的支持。
  2. 编写 MDX 文件：创建 .mdx 文件，并开始编写结合了 Markdown 和 JSX 的内容。
  3. 渲染 MDX：确保你的应用程序能够正确地加载和渲染 MDX 文件。这可能涉及到设置路由、导入 MDX 文件作为模块等步骤。

通过 MDX，你可以轻松创建既美观又功能丰富的文档和网页，同时保持开发效率和灵活性。

 

from:https://www.cnblogs.com/longmo666/p/18646184

Copyright © 2026 Longsheng All rights reserved