543 字
3 分钟
代码块选项组
选项组与 Markdown 代码选项组 是同一个容器,只是用在代码块场景:每个标签里放一段代码,读者点一次就能看不同包管理器 / 语言 / 系统的命令。
包管理器命令
效果
pnpm
pnpm installpnpm buildnpm
npm installnpm run buildBun
bun installbun run build源码
::: tabs#codeblock-pm
@tab pnpm#cb-pnpm
```bashpnpm installpnpm build```
@tab npm#cb-npm
```bashnpm installnpm run build```
@tab Bun#cb-bun
```bashbun installbun run build```
:::多语言实现对照
效果(同一功能的不同语言写法并排对比)
TypeScript
export function greet(name: string): string { return `Hello, ${name}!`;}Python
def greet(name: str) -> str: return f"Hello, {name}!"Rust
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 中执行:
$env:CONTENT_DIR = "C:/Users/KLEE/Desktop/Cline/shirone-content"pnpm content:syncpnpm devmacOS / Linux
在终端中执行:
export CONTENT_DIR="$HOME/Cline/shirone-content"pnpm content:syncpnpm dev源码
::: tabs#codeblock-os
@tab Windows#cb-win
在 PowerShell 中执行:
```powershell$env:CONTENT_DIR = "C:/Users/KLEE/Desktop/Cline/shirone-content"pnpm content:syncpnpm dev```
@tab macOS / Linux#cb-unix
在终端中执行:
```bashexport CONTENT_DIR="$HOME/Cline/shirone-content"pnpm content:syncpnpm dev```
:::参数与联动
| 写法 | 说明 |
|---|---|
::: tabs#容器 id | 容器起始,# 后是容器自己的 id(可省略) |
@tab 显示名#选项值 | 子标签;# 后的选项值决定跨组联动 |
@tab:active 显示名#值 | 指定初始选中的标签 |
::: | 容器结束 |
分享文章
生成精美分享图或复制链接,与更多人分享本文。
继续阅读
换条路线
从其他文章中稳定抽取
最后更新于 ,距今已过 301 天
部分内容可能已过时
评论