普通 Markdown 写出来的文章只有文字、图片、代码块——都是静态的。而 MDX 可以在文章里直接用 React 组件，把文章做成真正可互动的内容。
下面演示 11 种最实用的效果。
一、提示框 Callout
写文章时经常需要特别提醒读者，Callout 比普通段落更醒目：
ℹ️说明
MDX 是 Markdown + JSX 的缩写，本质上还是写文章，只是多了"插入组件"的能力。
💡写作小技巧
给每篇文章加 summary，方便读者在列表页快速判断是否值得点进来。
⚠️注意
Frontmatter 里的 date 格式必须是 YYYY-MM-DD，否则文章排序会出错。
✅部署成功
你的博客已经上线，可以分享给别人看了！
二、标签页 Tabs
把多个视角的内容组织在一起，不用全部展开：
三、折叠面板 Accordion
适合放 FAQ 或不是所有人都需要看的补充内容：
四、步骤卡片 Steps
教程类内容用步骤卡片，比普通列表更清晰：
- 1
新建 MDX 文件
在 blog 目录下新建一个 .mdx 文件，文件名即为 URL 路径。 - 2
写 Frontmatter
文件顶部写 title、date、summary，控制列表页的显示信息。 - 3
写正文内容
支持所有标准 Markdown 语法，以及项目里注册的自定义组件。 - 4
保存即发布
保存文件，刷新博客列表页，新文章就出现了。推送到 GitHub 后 Vercel 自动部署上线。
五、代码块 + 复制按钮
鼠标悬停在代码块上，右上角会出现复制按钮，一键复制：
npx create-next-app@14 my-brand --typescript --tailwind --app
export function getAllPosts(): PostMeta[] {
const files = fs.readdirSync(blogDir).filter((f) => f.endsWith(".mdx"));
return files
.map((file) => {
const slug = file.replace(/\.mdx$/, "");
const raw = fs.readFileSync(path.join(blogDir, file), "utf-8");
const { data, content } = matter(raw);
return { slug, title: data.title ?? slug, date: data.date ?? "", summary: data.summary ?? "" };
})
.sort((a, b) => (a.date > b.date ? -1 : 1));
}
六、嵌入 B 站视频
一行代码就能把 B 站视频嵌进文章，把 bvid 换成你自己的视频 BV 号：
七、引用卡片 Quote
适合放金句或重要观点，有左侧品牌色竖线：
用 AI 编程不是偷懒，是把精力放在更重要的事上——想清楚要做什么，而不是怎么写代码。
八、键盘按键 Kbd
写操作步骤时，按键展示比纯文字更直观：
保存文件：Ctrl + S
提交代码：先运行 git add .，再运行 git commit
九、代码对比 Diff
展示修改前后的代码变化，红色删除、绿色新增：
代码变更
const name = "老张"
const name = "张老师"
console.log(name)
十、时间轴 Timeline
适合展示学习路径或项目里程碑：
- 第 1 周
环境搭建
安装 Node.js，创建第一个 Next.js 项目，部署到 Vercel。 - 第 2 周
页面开发
完成首页所有模块，连接 Supabase 数据库。 - 第 3 周
功能接入
接入 DeepSeek AI，完成博客系统，网站全部功能上线。
十一、文件下载 Download
一键下载课程资料，带文件名和大小：
以上 11 种组件，涵盖了博客内容常见的互动场景。这些都是项目里自己写的，完全可以根据需要调整样式和功能。