MDX 示范

一个把 Markdown 和组件混排在一起的示范页面。

这是一段普通 Markdown 标题

下面这行是普通 Markdown 段落，用的是最朴素的 #、**加粗** 语法，和写 .md 文件完全一样。

紧接着，不用切换文件、不用写 import，直接插入一个组件标签——这就是“自由穿插”的意思：Markdown 写一段，组件插一段，顺序随便换。

卡片一 (Card)

这是 Card，可以点击跳转，也可以放纯说明文字（不设 href 就不可点击）。

卡片二 (Card)

多张 Card 用 CardGroup 包起来，自动排成响应式网格。

组件用完了，马上又能接回普通 Markdown 文字——这一段就是证明。下面再用分栏把两块内容并排放：

左边是普通文字，写在 Column 里。

右边也是 Column，两栏等宽、移动端会自动折叠成一栏。

再往下是步骤条，适合写安装教程这种有先后顺序的内容：

第一步 (Step)

安装 Blume：npm install blume

第二步 (Step)

写一个 .mdx 文件放进 docs/ 目录。

第三步 (Step)

运行 blume build，产物在 dist/ 里。

普通段落又插回来了——接下来演示 Tabs，常用来切换“同一件事的不同版本”，比如不同操作系统的安装命令：

用 Homebrew：brew install blume

用 winget：winget install blume

然后是手风琴，适合放 FAQ、可折叠的补充说明：

MDX 和 Markdown 有什么区别？

MDX 在 Markdown 基础上允许直接写组件标签，Markdown 只能写纯文本结构。

要写 import 吗？

不用，Blume 在渲染层已经把这些内置组件预先注册好了。

最后是代码组，把几段不同语言的代码放进同一个可切换的代码块里：

export const greet = (name: string) => `Hello, ${name}`;

def greet(name: str) -> str:
    return f"Hello, {name}"

到这里，一段 Markdown 文字结尾——你可以看到整篇文件里，普通文字段落和组件标签是交替出现的，中间完全不需要任何 import 语句，这就是“自由穿插”。