MDX高级功能演示
本文展示了 MDX 支持的各种高级功能，包括交互式组件、多媒体内容、脚注等。
1. 图片功能
基础图片插入
使用标准 Markdown 语法插入图片：
图片轮播组件
使用 React 组件创建交互式图片轮播：
1 / 4
多图并排显示
2. 视频功能
HTML5 视频
YouTube 嵌入
Bilibili 嵌入
3. 外部链接
所有外部链接会自动在新标签页打开：
4. 任务列表
使用 GFM 任务列表：
- 已完成的任务
- 另一个已完成的任务
- 待完成的任务
- 另一个待完成的任务
5. 高亮文本
使用 HTML 标签高亮重要内容：
这是一段普通文本，但是这部分被高亮了，非常醒目！
6. 键盘按键
显示键盘快捷键：
按 Ctrl + C 复制，Ctrl + V 粘贴。
在 Mac 上使用 ⌘ + C 和 ⌘ + V。
7. 缩略语
使用 HTML abbr 标签：
HTML 和 CSS 是网页开发的基础。
8. 详情折叠
点击展开查看更多内容
这里是折叠的内容，可以包含：
- 列表
- 格式化文本
代码
console.log('甚至可以包含代码块！');9. 引用块变体
💡 提示
这是一个带图标的提示框。
⚠️ 警告
这是一个警告信息。
✅ 成功
操作已成功完成！
10. 表情符号
支持 Unicode 表情符号：
😀 😃 😄 😁 😆 😅 🤣 😂 🙂 🙃 😉 😊 😇 🥰 😍 🤩 😘 😗 ☺️ 😚 😙
11. 上标和下标
使用 HTML 标签：
- 上标：E = mc2
- 下标：H2O
12. 进度条
当前进度：70%
13. 自定义样式容器
自定义样式容器
你可以使用 HTML 和内联样式创建任何你想要的布局和设计！
总结
MDX 结合了 Markdown 的简洁性和 React 组件的强大功能，让你可以：
- ✨ 使用交互式组件
- 🎨 自定义样式和布局
- 📝 保持 Markdown 的简洁语法
- 🔧 扩展功能无限可能
尝试在你的项目中使用 MDX，解锁更多可能性！