这篇笔记纯粹用来测试 4 个 MDX 组件的渲染效果。frontmatter 里的 accent: purple 会让整篇正文的强调色变紫。
Callout — 提示框
四种 type:info / tip / warn / note。
Quote — 大块引用
比 markdown 自带的 > blockquote 更醒目,带来源链接。
"
Premature optimization is the root of all evil. Yet we should not pass up our opportunities in that critical 3%.
InteractiveBlock — 互动 / 可视化容器
用来包裹一个独立的”特殊段落”,比如内嵌 SVG / 图表 / 演示。
可视化 一个 SVG 示意图
Figure — 配图
带 caption 的图片容器。也可以不传 src,在里面嵌任何东西作为图。
普通 Markdown 也照常工作
- 列表项 1
- 列表项 2
inline code和 链接
// 代码块也按 prose 样式渲染
function hello() {
console.log('hi');
}
普通的 markdown blockquote,跟
<Quote>是不同的视觉。