MDX (Markdown JSX) 是一种极其强大的格式。它不仅仅是“带样式的文本”，它实际上是一个可以在文章中运行 React 组件的运行时环境。
这篇博文本身就是一个演示。你可以点击下面的按钮，它们不仅仅是图片，而是真实的、运行中的代码。
1. 基础交互：状态管理
这是一个完全嵌入在 Markdown 中的 React 计数器组件。它拥有自己的 useState 状态，且独立于页面其他部分运行。
试着点击上面的 + 和 -。你会发现数字在实时变化。这意味着我们可以在博客文章里写迷你应用程序！
2. 语义化提示框 (Callouts)
普通的 Markdown 引用块 > 有点乏味。我们可以封装一个 <Callout /> 组件来传达不同情绪的信息。
Astro 的 MDX 集成默认支持 GitHub Flavored Markdown (GFM)，包括表格和任务列表。
虽然 MDX 很强大，但请注意：每一个嵌入的 React 组件都会增加页面的 JS 体积。请配合 client:visible 使用。
不要在 MDX 中直接定义复杂的 React 组件逻辑，最好将它们提取到单独的 .tsx 文件中引入，以保持文章整洁。
3. 嵌入式投票 (Interactive Poll)
既然 MDX 支持 React，我们就可以在文章中嵌入复杂的交互逻辑，比如一个实时投票组件。这对于收集读者反馈非常有用。
你更喜欢哪种前端框架？
当你点击选项时，你会看到一个平滑的动画展示了模拟的投票结果。这展示了 MDX 处理用户事件和动态样式的能力。
4. 数据可视化 (Chart Demo)
除了代码和文本，MDX 还可以轻松处理复杂的数据可视化。这里有一个用 SVG 和 Framer Motion 绘制的交互式折线图。
5. 自由混排动画
最疯狂的是，你可以直接使用 Framer Motion 的动画组件来排版你的文字。
上面这两个方块和圆球，并不是 GIF 图，而是实时渲染的 DOM 节点。这意味着它们是矢量、高清且可交互的。
结论
MDX 模糊了“内容”与“应用”的界限。对于技术博客来说，它是解释复杂概念的神器。你可以：
- 用交互式图表解释算法复杂度。
- 用可拖拽的滑块演示 CSS 属性的变化。
- 用 3D 模型展示 WebGL 的魅力。
The limit is your imagination.