代码选项组 - 二甲基

代码选项组（Tabs / Code Group）用于在同一卡片中并排切换展示多种编程语言、包管理器命令或不同环境的操作指南。

语法格式#

使用 ::: tabs 容器与 @tab 分割子选项卡：

1
::: tabs#markdown-tabs-demo
2

3
@tab pnpm#pnpm
4

5
```bash
6
pnpm install
7
pnpm dev
8
```
9

10
@tab npm#npm
11

12
```bash
13
npm install
14
npm run dev
15
```
16

17
@tab Bun#bun
18

19
```bash
20
bun install
21
bun dev
22
```
23

24
:::

渲染效果：

pnpm

1
pnpm install
2
pnpm dev

npm

1
npm install
2
npm run dev

Bun

1
bun install
2
bun dev

@tab 标签文字#同步标识 是完整写法：井号前是显示文案，井号后是全站同步用的标识。

标签内容不限于代码#

每个 @tab 内部都是完整的 Markdown 上下文，表格、列表、提示容器都可以放入：

1
::: tabs#deploy-target
2

3
@tab Vercel#vercel
4

5
在 Vercel 中导入内容仓库，构建命令填写 `pnpm build`。
6

7
| 配置项 | 值 |
8
| --- | --- |
9
| 输出目录 | `dist` |
10
| Node 版本 | 22 |
11

12
@tab Cloudflare Pages#cloudflare
13

14
在 Cloudflare Pages 中连接同一仓库。
15

16
| 配置项 | 值 |
17
| --- | --- |
18
| 构建命令 | `pnpm build` |
19
| 输出目录 | `dist` |
20

21
:::

渲染效果：

Vercel

在 Vercel 中导入内容仓库，构建命令填写 pnpm build。

配置项	值
输出目录	`dist`
Node 版本	22

Cloudflare Pages

在 Cloudflare Pages 中连接同一仓库。

配置项	值
构建命令	`pnpm build`
输出目录	`dist`

指定默认激活项#

使用 @tab:active 显式标记初次加载时选中的选项卡：

1
::: tabs#runtime-choice
2

3
@tab Node.js#node
4

5
Node.js 运行时。
6

7
@tab:active Bun#bun
8

9
Bun 运行时（默认选中）。
10

11
:::

渲染效果：

Node.js

Node.js 运行时。

Bun

Bun 运行时（默认选中）。

核心特性#

默认激活：使用 @tab:active 显式标记初次加载默认选中的选项卡。
全局同步：全站相同 #id 的选项卡（如 #pnpm）点击切换时会自动保持联动同步。
键盘导航：完全支持左右方向键切换焦点。

需求	推荐写法
切换命令或代码	`::: tabs` + `@tab`
折叠而不切换	代码折叠 `collapse={4-8}`
强调差异	差异标记 `ins` / `del`

二甲基

语法格式#

标签内容不限于代码#

指定默认激活项#

核心特性#

Markdown 语法

继续阅读

换条路线

评论

二甲基

语法格式#

标签内容不限于代码#

指定默认激活项#

核心特性#

分享文章

沿着主题读

换条路线

评论