MDX 魔法：在 Markdown 中写 JSX

欢迎来到 MDX 测试页面！这篇专门展示了如何将 React/Astro JSX 的能力注入到普通的 Markdown 中，同时也验证所有标准 Markdown 语法在 MDX 环境下的渲染效果。

MDX 魔法 (JSX in Markdown)

MDX 赋予了我们在 Markdown 中直接书写 JavaScript 表达式和 UI 组件的能力。

1. 变量插值

这篇文章的作者是：万人恢复。

2. 内联 JSX 与自定义样式

🔮

高级交互式 JSX 卡片

它完全使用 Tailwind CSS 编写，直接嵌入在 Markdown 当中！不仅仅是一个方块，它包含了响应式布局，以及一个真实的交互按钮。这就使得 MDX 完全超越了传统 Markdown 的排版限制！

交互演示

3. 条件渲染

根据当前时间进行问候。

早上好 ☀️，欢迎来到我的个人博客！

4. 列表映射 (Mapping)

下面是通过 JavaScript .map() 动态渲染的列表，并且利用了 Tailwind CSS 进行样式定制：

#Astro
#MDX
#Tailwind CSS

5. 交互与事件 (如果引入了客户端组件)

(如果是 React/Vue 组件，你甚至可以在 MDX 里直接传递 onClick 事件和 Props！)

// import ReactButton from '../../components/ReactButton.jsx';
// <ReactButton client:load onClick={() => alert('Hello!')}>点击我</ReactButton>

基础 Markdown 语法兼容性测试

以下部分从 hello-world 文章迁移而来，用于验证标准 Markdown 语法在 MDX 环境下的渲染是否完全一致。

1. 基础排版

加粗，斜体，~~删除线~~，下划线。

你可以轻松插入外部链接或本地/网络图片：

2. 列表与表格

无序列表与嵌套：

一级项目
- 二级项目 A
  - 三级项目
- 二级项目 B
另一个一级项目

有序列表与嵌套：

第一步：安装依赖
- npm install astro
- npm install tailwindcss
第二步：配置项目
1. 创建 astro.config.mjs
2. 配置 Tailwind 插件
第三步：启动开发服务器
- 运行 npm run dev
- 访问 http://localhost:4321

框架	模式	客户端 JS
Astro	SSG / SSR	极少 (Islands)
Next.js	SSR / SSG	较多

3. 公式与代码

质能公式： $E=mc^2$ 。

f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi

支持行内代码 npm init astro 和多行代码块：

console.log('Hello, Markdown!');

4. 引用与任务

“Less is more.” —— 这是一个引用。

配置基础环境
完成博客搭建

5. 脚注与分割线

脚注：

MDX 是 Markdown 的扩展¹，它允许在文档中直接嵌入 JSX 组件²。脚注在 MDX 环境下同样能够正确渲染。

水平分割线：

分割线常用于在视觉上分隔不同的内容区块。

6. Mermaid 图表

支持在 Markdown 中直接编写 Mermaid 语法，实时渲染为图表。

甘特图：

gantt
    title 博客开发计划
    dateFormat  YYYY-MM-DD
    section 前端
    搭建 Astro 框架       :done, a1, 2026-05-01, 3d
    配置 Tailwind 主题    :done, a2, after a1, 2d
    集成 MDX 支持         :done, a3, after a2, 2d
    section 内容
    编写首篇文章          :done, b1, 2026-05-04, 1d
    添加 Mermaid 图表     :active, b2, 2026-05-05, 2d

流程图：

flowchart TD
    A[开始] --> B{判断}
    B -->|条件1| C[处理1]
    B -->|条件2| D[处理2]
    C --> E[结束]
    D --> E

时序图：

sequenceDiagram
    participant U as 用户
    participant B as 浏览器
    participant S as 服务器
    U->>B: 输入网址
    B->>S: HTTP 请求
    S-->>B: 返回 HTML
    B-->>U: 渲染页面

类图：

classDiagram
    class Animal {
        +String name
        +makeSound()
    }
    class Dog {
        +fetch()
    }
    class Cat {
        +climb()
    }
    Animal <|-- Dog
    Animal <|-- Cat