MDX 演示 - 在文章中嵌入组件
技术 3分钟
目录
MDX 让文章活起来
这是一篇 MDX 示例文章。不同于普通 Markdown,MDX 允许你在文章中直接使用 React 组件。
嵌入图标
下面是一个动态图标:
这是 GitHub 图标,来自 Iconify
交互式提示框
小提示
MDX 的强大之处在于你可以创建任何你想要的组件。图表、代码编辑器、交互式演示… 一切皆有可能。
代码示例
// 你可以在 MDX 中导入组件
import { MyComponent } from '../components/MyComponent';
// 然后在正文中使用
<MyComponent />
结语
MDX 打破了内容与代码的边界。你可以:
- ✦ 嵌入动态图表
- ✦ 创建交互式演示
- ✦ 复用设计系统中的组件
- ✦ 让技术文章更有表现力
开始尝试吧!