---
title: 代码组
description: 在标签页界面中显示代码块，以 cURL、Python 和 JavaScript 等多种语言展示同一操作。
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

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

在以下情况下使用 CodeGroup：
- **以多种语言展示 API 调用**（cURL、Python、JavaScript）
- **比较不同框架中的实现**
- **在代码演示中展示多个文件**

## 基本用法

<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>

````mdx
<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 调用：

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

```javascript Node.js
const response = await fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${TOKEN}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'John' })
});
```

```python Python
import requests

response = requests.post(
    'https://api.example.com/users',
    headers={'Authorization': f'Bearer {TOKEN}'},
    json={'name': 'John'}
)
```
</CodeGroup>

## 添加文件名

为代码块添加文件名：

<CodeGroup>
```typescript src/client.ts
export const client = axios.create({
  baseURL: process.env.API_URL
});
```

```python client.py
import httpx

client = httpx.Client(base_url=os.environ['API_URL'])
```
</CodeGroup>

## CodeGroup 与 Tabs 的区别

| 功能 | CodeGroup | Tabs |
|---------|-----------|------|
| 适用对象 | 仅代码块 | 任意内容 |
| 标签 | 从语言标识符自动提取 | 手动设置 title 属性 |
| 同步 | 否 | 是（跨页面） |
| 语法高亮 | 按语言保留 | 标准 |

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

## 提示

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

## 接下来

<Columns cols={2}>
  <Card title="组件概览" icon="puzzle-piece" href="/cn/components/overview">
    浏览所有可用组件
  </Card>
  <Card title="MDX 基础" icon="file-code" href="/cn/content/mdx-basics">
    了解如何在 MDX 中使用组件
  </Card>
</Columns>