代码组

CodeGroup 在标签页界面中显示代码块，以多种语言展示同一操作。它专为代码设计。与适用于任意内容的 Tabs 不同，CodeGroup 会自动提取语言标签，并在所有标签页中保留语法高亮。

在以下情况下使用 CodeGroup：

• 以多种语言展示 API 调用（cURL、Python、JavaScript）
• 比较不同框架中的实现
• 在代码演示中展示多个文件

基本用法

const data = await fetch('/api/data').then(r => r.json());

<CodeGroup>
```javascript JavaScript
const data = await fetch('/api/data').then(r => r.json());
```

```python Python
import requests
data = requests.get('/api/data').json()
```

```ruby Ruby
data = HTTParty.get('/api/data').parsed_response
```
</CodeGroup>

API 示例

以不同格式展示 API 调用：

curl -X POST https://api.example.com/users \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"name": "John"}'

添加文件名

为代码块添加文件名：

export const client = axios.create({
  baseURL: process.env.API_URL
});

隐藏某个标签页的复制按钮

在代码栅栏上添加 nocopy，即可只移除该标签页的复制按钮——同组中的其他标签页仍保留自己的按钮：

curl -X POST https://api.example.com/users \
  -H "Authorization: Bearer $TOKEN"

<CodeGroup>
```bash cURL nocopy
curl -X POST https://api.example.com/users \
  -H "Authorization: Bearer $TOKEN"
```

```javascript Node.js
const response = await fetch('https://api.example.com/users', {
  method: 'POST',
  headers: { 'Authorization': `Bearer ${TOKEN}` }
});
```
</CodeGroup>

当某个标签页不适合原样复制时可以使用它，例如带占位令牌的 cURL 示例，同时让其他标签页中可用的示例保持可复制。关于独立代码块上的该标志，请参阅代码块 → 隐藏复制按钮。

CodeGroup 与 Tabs 的区别

经验法则： 对多语言代码示例使用 CodeGroup。需要跨页面同步或展示非代码内容时，使用 Tabs。

提示

• 将最常用的语言放在首位（默认选中）
• 标签页标签取自语言标识符之后的文本（例如 javascript Node.js）
• 在页面之间导航时，所选标签页会保持不变

接下来