MDX 演示 - 在文章中嵌入组件

技术 3分钟

MDX 让文章活起来

这是一篇 MDX 示例文章。不同于普通 Markdown,MDX 允许你在文章中直接使用 React 组件。

嵌入图标

下面是一个动态图标:

这是 GitHub 图标,来自 Iconify

交互式提示框

小提示

MDX 的强大之处在于你可以创建任何你想要的组件。图表、代码编辑器、交互式演示… 一切皆有可能。

代码示例

// 你可以在 MDX 中导入组件
import { MyComponent } from '../components/MyComponent';

// 然后在正文中使用
<MyComponent />

结语

MDX 打破了内容与代码的边界。你可以:

  • ✦ 嵌入动态图表
  • ✦ 创建交互式演示
  • ✦ 复用设计系统中的组件
  • ✦ 让技术文章更有表现力

开始尝试吧!

cc

MDX 演示 - 在文章中嵌入组件

http://localhost:4321/posts/mdx-demo/
Author iicemeta
Published at 2026-03-13