MDX 入门指南

MDX 是 Markdown 的扩展，允许你在 Markdown 中使用 React 组件。这使得创建动态内容变得非常容易。

什么是 MDX？

MDX 结合了 Markdown 的简洁和 React 的强大功能。

特点

• 📝 Markdown 语法 - 保持 Markdown 的简洁
• ⚛️ React 组件 - 在 Markdown 中使用 React 组件
• 🎨 自定义样式 - 轻松自定义样式
• 🚀 服务器渲染 - 支持服务器端渲染

基本语法

标题

markdownCopy
1
2
3
# 一级标题
## 二级标题
### 三级标题

列表

markdownCopy
1
2
3
4
- 项目 1
- 项目 2
  - 子项目 2.1
  - 子项目 2.2

链接

markdownCopy
1
[Next.js 官方网站](https://nextjs.org)

图片

markdownCopy
1
![示例图片](https://picsum.photos/400/200)

React 组件

MDX 允许你在 Markdown 中使用 React 组件。

使用组件

jsxCopy
1
2
3
import MyComponent from './components/MyComponent';

<MyComponent />

内置组件

MDX 提供了一些内置组件，如代码块、引用块等。

代码高亮

MDX 支持代码高亮，使代码更易读。

JavaScript 示例

javascriptCopy
1
2
3
function hello() {
  console.log('Hello, MDX!');
}

TypeScript 示例

typescriptCopy
1
2
3
4
5
6
7
8
9
interface User {
  name: string;
  age: number;
}

const user: User = {
  name: 'John',
  age: 30,
};

引用块

表格

| 姓名 | 年龄 | 职业 | |------|------|------| | 张三 | 25 | 工程师 | | 李四 | 30 | 设计师 |

数学公式

MDX 支持 LaTeX 数学公式。

行内公式

这是一个行内公式：$E = mc^2$

块级公式

textCopy
1
\int_{0}^{\infty} e^{-x} dx = 1

总结

MDX 是一个强大的工具，结合了 Markdown 的简洁和 React 的强大功能。它非常适合创建动态内容。

进一步学习

• MDX 官方文档
• Next.js MDX 指南
• Shiki 代码高亮