484 字
2 分钟
页面浏览--访问次数--
代码选项组

代码选项组(Tabs)用于在同一区域并排切换展示不同包管理器命令(pnpm / npm / yarn / bun)、多种编程语言实现或不同操作系统的配置步骤。

语法格式#

使用 ::: tabs 容器与 @tab 分割子标签页:

::: tabs#codeblock-package-managers
@tab pnpm#pnpm
```bash
pnpm install
pnpm build
```
@tab npm#npm
```bash
npm install
npm run build
```
@tab Bun#bun
```bash
bun install
bun run build
```
:::

渲染效果:

pnpm
Terminal window
pnpm install
pnpm build
npm
Terminal window
npm install
npm run build
Bun
Terminal window
bun install
bun run build

多语言实现对比#

同一段逻辑用不同语言书写时,选项组比「贴三段代码 + 小标题」更省版面:

::: tabs#fetch-json
@tab TypeScript#ts
```ts
const res = await fetch('/api/posts.json');
const posts = await res.json();
```
@tab Python#python
```python
import json, urllib.request
res = urllib.request.urlopen('/api/posts.json')
posts = json.load(res)
```
@tab Rust#rust
```rust
let res = reqwest::get("/api/posts.json").await?;
let posts: Vec<Post> = res.json().await?;
```
:::

渲染效果:

TypeScript
const res = await fetch('/api/posts.json');
const posts = await res.json();
Python
import json, urllib.request
res = urllib.request.urlopen('/api/posts.json')
posts = json.load(res)
Rust
let res = reqwest::get("/api/posts.json").await?;
let posts: Vec<Post> = res.json().await?;

指定默认激活项#

::: tabs#shell-choice
@tab Bash#bash
```bash
pnpm content:sync
pnpm dev
```
@tab:active PowerShell#powershell
```powershell
$env:CONTENT_DIR = "<内容仓库的本地路径>"
pnpm content:sync
pnpm dev
```
:::

渲染效果:

Bash
Terminal window
pnpm content:sync
pnpm dev
PowerShell
Terminal window
$env:CONTENT_DIR = "<内容仓库的本地路径>"
pnpm content:sync
pnpm dev

默认激活与跨块联动#

  • 指定激活项:使用 @tab:active 显式设置默认选中的标签页。
  • 全局同步联动:在同一页面中,拥有相同 #id 的选项卡(例如全站的 #pnpm 与 #npm)在用户点击一次后会自动全局联动切换。
  • 无障碍支持:完全支持左右方向键键盘导航切换标签页。
内容类型推荐标识
包管理器命令#pnpm / #npm / #yarn / #bun
语言实现#ts / #python / #rust
部署平台#vercel / #cloudflare / #netlify
操作系统#windows / #macos / #linux

第 24 篇,共 30 篇本文属于系列

代码选项组
https://www.ariels.xyz/posts/codeblock-tabs/
作者
Ariel
发布于
2026-10-10
许可协议
CC BY-NC-ND 4.0

分享文章

生成精美分享图或复制链接,与更多人分享本文。

继续阅读

沿着主题读

基于共同的标签与分类

换条路线

从其他文章中稳定抽取

评论

正在加载评论...