615 字
3 分钟
Markdown 代码选项组
选项组把同一件事的不同做法（不同包管理器、不同语言、不同系统）收在一张卡片里切换展示。
基础用法
效果（点击标签切换，或用左右方向键）
pnpm
pnpm installpnpm devnpm
npm installnpm run devBun
bun installbun dev源码
::: tabs#package-managers
@tab pnpm#pnpm
```bashpnpm installpnpm dev```
@tab npm#npm
```bashnpm installnpm run dev```
@tab Bun#bun
```bashbun installbun dev```
:::语法要点
| 位置 | 写法 | 说明 |
|---|---|---|
| 容器起始 | ::: tabs[#同步 id] | # 后面是同页/全站联动用的 id，可省略 |
| 子标签起始 | @tab 显示名[#选项值] | # 后面是该标签对应的「选项值」，用于联动 |
| 默认激活 | @tab:active 显示名#值 | 让某个标签初始处于选中状态 |
| 容器结束 | ::: | 与起始成对 |
全局联动
效果：同一页里两个选项组只要 # 后面的选项值相同，切换其中一个，另一个会自动跟着切换。
pnpm
pnpm 组：用 pnpm 安装依赖。
npm
npm 组：用 npm 安装依赖。
安装
安装步骤（联动组 A 的选择）。
安装
安装步骤（联动组 B 的选择）。
源码（两个容器用不同的容器 id，但 @tab 后面的选项值一致）
::: tabs#runtime-a
@tab pnpm#link-pnpm
pnpm 组：用 pnpm 安装依赖。
@tab npm#link-npm
npm 组：用 npm 安装依赖。
:::
::: tabs#runtime-b
@tab 安装#link-pnpm
安装步骤（联动组 A 的选择）。
@tab 安装#link-npm
安装步骤（联动组 B 的选择）。
:::边界与实现
- 至少要两个不重复的选项，且每个选项都要有独立正文，否则整块保留为普通 Markdown；
- SSR 阶段不会隐藏任何面板，客户端增强后才启用 ARIA tabs、同 id 同步与本地偏好记忆；
- 初始化覆盖直接加载、站内无刷新切页（Swup）与文章解密三种情形，且不产生网络请求。
Markdown 代码选项组
https://www.klucen.cn/posts/博客搭建/markdown-tabs/分享文章
生成精美分享图或复制链接，与更多人分享本文。
继续阅读
换条路线
从其他文章中稳定抽取
最后更新于 ，距今已过 301 天
部分内容可能已过时
评论