543 字
3 分钟
页面浏览--访问次数--
代码块选项组

选项组与 Markdown 代码选项组 是同一个容器,只是用在代码块场景:每个标签里放一段代码,读者点一次就能看不同包管理器 / 语言 / 系统的命令。

包管理器命令#

效果

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

源码

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

多语言实现对照#

效果(同一功能的不同语言写法并排对比)

TypeScript
greet.ts
export function greet(name: string): string {
return `Hello, ${name}!`;
}
Python
greet.py
def greet(name: str) -> str:
return f"Hello, {name}!"
Rust
greet.rs
fn greet(name: &str) -> String {
format!("Hello, {}!", name)
}

源码

::: tabs#codeblock-lang
@tab TypeScript#cb-ts
```typescript title="greet.ts"
export function greet(name: string): string {
return `Hello, ${name}!`;
}
```
@tab Python#cb-py
```python title="greet.py"
def greet(name: str) -> str:
return f"Hello, {name}!"
```
@tab Rust#cb-rs
```rust title="greet.rs"
fn greet(name: &str) -> String {
format!("Hello, {}!", name)
}
```
:::

不同系统的操作步骤#

效果(每个标签内可以放多段内容,不只是单个代码块)

Windows

在 PowerShell 中执行:

Terminal window
$env:CONTENT_DIR = "C:/Users/KLEE/Desktop/Cline/shirone-content"
pnpm content:sync
pnpm dev
macOS / Linux

在终端中执行:

Terminal window
export CONTENT_DIR="$HOME/Cline/shirone-content"
pnpm content:sync
pnpm dev

源码

::: tabs#codeblock-os
@tab Windows#cb-win
在 PowerShell 中执行:
```powershell
$env:CONTENT_DIR = "C:/Users/KLEE/Desktop/Cline/shirone-content"
pnpm content:sync
pnpm dev
```
@tab macOS / Linux#cb-unix
在终端中执行:
```bash
export CONTENT_DIR="$HOME/Cline/shirone-content"
pnpm content:sync
pnpm dev
```
:::

参数与联动#

写法说明
::: tabs#容器 id容器起始,# 后是容器自己的 id(可省略)
@tab 显示名#选项值子标签;# 后的选项值决定跨组联动
@tab:active 显示名#值指定初始选中的标签
:::容器结束

第 23 篇,共 23 篇本文属于系列

代码块选项组
https://www.klucen.cn/posts/博客搭建/codeblock-tabs/
作者
KLucen
发布于
2025-12-14
许可协议
CC BY-NC-SA 4.0

分享文章

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

继续阅读

沿着主题读

基于共同的标签与分类

换条路线

从其他文章中稳定抽取

评论

正在加载评论...

最后更新于 ,距今已过 301 天

部分内容可能已过时