---
title: MDX 示范
description: 一个把 Markdown 和组件混排在一起的示范页面。
---

# 这是一段普通 Markdown 标题

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

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

<CardGroup cols={2}>
  <Card title="卡片一 (Card)" icon="rocket">
    这是 **Card**，可以点击跳转，也可以放纯说明文字（不设 `href` 就不可点击）。
  </Card>
  <Card title="卡片二 (Card)" icon="book-open">
    多张 `Card` 用 **CardGroup** 包起来，自动排成响应式网格。
  </Card>
</CardGroup>

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

<Columns cols={2}>
  <Column>
    左边是普通文字，写在 `Column` 里。
  </Column>
  <Column>
    右边也是 `Column`，两栏等宽、移动端会自动折叠成一栏。
  </Column>
</Columns>

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

1. **第一步 (Step)**

    安装 Blume：`npm install blume`

2. **第二步 (Step)**

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

3. **第三步 (Step)**

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

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

**macOS**

用 Homebrew：`brew install blume`

**Windows**

用 winget：`winget install blume`

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

<Accordion>
  <AccordionItem title="MDX 和 Markdown 有什么区别？">
    MDX 在 Markdown 基础上允许直接写组件标签，Markdown 只能写纯文本结构。
  </AccordionItem>
  <AccordionItem title="要写 import 吗？">
    不用，Blume 在渲染层已经把这些内置组件预先注册好了。
  </AccordionItem>
</Accordion>

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

<CodeGroup>

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

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

</CodeGroup>

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