轻松入门 MDX：在 Markdown 中拥抱组件

2026.07.22 · 6min

---
title: '轻松入门 MDX：在 Markdown 中拥抱组件'
pubDate: '2026-07-22'
---

MDX 让你在熟悉的 Markdown 中直接使用 JSX 和 React/Vue 等框架的组件，  
是写技术博客、文档或交互式故事的最佳格式。这篇文章将带你快速上手，并展示 
chiri 主题内置的丰富排版能力。

## 什么是 MDX？

简单说，**MDX = Markdown + JSX**。  
你可以在文章里直接写组件：

```mdx
<Alert type="info">
  **注意**：这是一条用组件渲染的提示信息。
</Alert>

也可以使用 import 引入外部组件或数据：

import { Chart } from './chart.js'
import population from './population.json'

<Chart data={population} />

当然，标准的 Markdown 语法完全保留，你可以像过去一样自由写作。

为什么选择 MDX？

组件复用：把重复的 UI 片段抽象为组件，维护一处即可。
动态交互：嵌入图表、实时计数器、演示框等，文章立刻变活。
更好的写作体验：正文用 Markdown，复杂部分用 JSX 增强，各取所长。

基础语法一览

代码块（带语法高亮）

// 一个简单的 React 计数器
import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => setCount(count + 1)}>
      点击了 {count} 次
    </button>
  )
}

数学公式（KaTeX）

行内公式： $E=mc^2$
块级公式：

\sum_{i=1}^{k+1} i = \left(\sum_{i=1}^k i\right) + (k+1) = \frac{k(k+1)}{2} + k + 1 = \frac{k(k+1) + 2(k+1)}{2} = \frac{(k+1)(k+2)}{2}

嵌入内容

在 chiri 主题中，你可以用指令轻松嵌入媒体：

YouTube 视频

::youtube{url=“https://www.youtube.com/watch?v=dQw4w9WgXcQ”}

GitHub 仓库卡片

withastroastro

-- -- --

引用块与脚注

MDX 是内容创作的“瑞士军刀”，兼具简洁与强大。
— 某位快乐的开发者^1

表格

特性	支持情况	备注
Markdown	✅	完全兼容
JSX 组件	✅	需配合框架
ESM 导入	✅	`import/export`
自定义指令	✅	如 `::youtube`

一个小练习

试试在 MDX 中混合使用表达式：

圆的周长： $\pi \times 2 \times 5 = {Math.PI * 2 * 5}$
当前时间戳（表达式）：{Date.now()}

在构建时这个值会被计算为静态内容，完美平衡动态与性能。

结语

MDX 打破了文档和应用的边界。用 chiri 主题搭建你的博客，再配合 MDX，就能创造出既美观又功能丰富的数字花园。
现在，打开终端执行：

pnpm new '我的第一篇 MDX 文章'

开始你的创作吧！

MDX

Markdown for the component era | MDX

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.