484 字
2 分钟
代码选项组
代码选项组(Tabs)用于在同一区域并排切换展示不同包管理器命令(pnpm / npm / yarn / bun)、多种编程语言实现或不同操作系统的配置步骤。
语法格式
使用 ::: tabs 容器与 @tab 分割子标签页:
::: tabs#codeblock-package-managers
@tab pnpm#pnpm
```bashpnpm installpnpm build```
@tab npm#npm
```bashnpm installnpm run build```
@tab Bun#bun
```bashbun installbun run build```
:::渲染效果:
pnpm
pnpm installpnpm buildnpm
npm installnpm run buildBun
bun installbun run build多语言实现对比
同一段逻辑用不同语言书写时,选项组比「贴三段代码 + 小标题」更省版面:
::: tabs#fetch-json
@tab TypeScript#ts
```tsconst res = await fetch('/api/posts.json');const posts = await res.json();```
@tab Python#python
```pythonimport json, urllib.requestres = urllib.request.urlopen('/api/posts.json')posts = json.load(res)```
@tab Rust#rust
```rustlet 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.requestres = 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
```bashpnpm content:syncpnpm dev```
@tab:active PowerShell#powershell
```powershell$env:CONTENT_DIR = "<内容仓库的本地路径>"pnpm content:syncpnpm dev```
:::渲染效果:
Bash
pnpm content:syncpnpm devPowerShell
$env:CONTENT_DIR = "<内容仓库的本地路径>"pnpm content:syncpnpm dev默认激活与跨块联动
- 指定激活项:使用
@tab:active显式设置默认选中的标签页。 - 全局同步联动:在同一页面中,拥有相同
#id的选项卡(例如全站的#pnpm与#npm)在用户点击一次后会自动全局联动切换。 - 无障碍支持:完全支持左右方向键键盘导航切换标签页。
| 内容类型 | 推荐标识 |
|---|---|
| 包管理器命令 | #pnpm / #npm / #yarn / #bun |
| 语言实现 | #ts / #python / #rust |
| 部署平台 | #vercel / #cloudflare / #netlify |
| 操作系统 | #windows / #macos / #linux |
Markdown 语法
已完结分享文章
生成精美分享图或复制链接,与更多人分享本文。
继续阅读
最后更新于 ,距今已过 6 天
部分内容可能已过时
评论