---
title: 代码抽屉
slug: docs/cn/4-iIzpvbL95C1wSrLuz7Z
createdAt: 2026-06-05T12:51:26.902Z
---

[代码抽屉](docId\:RB1QzLJIPVCLeGxIy6_IP) 区块会在双栏布局的右侧列显示请求示例和响应示例。请使用它们构建交互式 API 文档。

## 语法

您可以使用 Markdown 或 MDX 添加此组件。

::::Tabs
:::Tab{title="Markdown"}
```markdown
::::CodeDrawer{title="Endpoint Name"}
:::CodeblockTabsExamples
(Code blocks with request examples)
:::
:::CodeblockTabsResponses
(Code blocks with response examples)
:::
::::
```
:::

:::Tab{title="MDX"}
```javascript
<CodeDrawer title="Endpoint Name">
  <CodeblockTabsExamples>
    (Code blocks with request examples)
  </CodeblockTabsExamples>
  <CodeblockTabsResponses>
    (Code blocks with response examples)
  </CodeblockTabsResponses>
</CodeDrawer>
```
:::
::::

代码抽屉包含两个部分：

- `代码块选项卡示例` 用于请求示例。&#x20;
- `CodeblockTabsResponses` 用于响应示例。&#x20;

每个部分可以包含一个或多个围栏代码块。当存在多个代码块时，它们会自动分组为语言选项卡。

当在双栏布局中使用时，代码抽屉会渲染在右侧列。

## MDX 示例

以下示例创建一个包含 JavaScript、Python 和 Bash 请求示例，以及成功和错误响应的代码抽屉。

````javascript
<CodeDrawer title="Create a User">
  <CodeblockTabsExamples>

  ```javascript
  const response = await fetch('https://api.example.com/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer sk_live_xxx'
    },
    body: JSON.stringify({
      name: 'Jane Doe',
      email: 'jane@example.com',
      role: 'admin'
    })
  })
  const user = await response.json()
  ```

  ```python
  import requests

  response = requests.post('https://api.example.com/users', json={
      'name': 'Jane Doe',
      'email': 'jane@example.com',
      'role': 'admin'
  }, headers={
      'Authorization': 'Bearer sk_live_xxx'
  })
  user = response.json()
  ```

  ```bash
  curl -X POST https://api.example.com/users \
    -H "Content-Type: application/json" \
    -H "Authorization: Bearer sk_live_xxx" \
    -d '{"name":"Jane Doe","email":"jane@example.com","role":"admin"}'
  ```

  </CodeblockTabsExamples>

  <CodeblockTabsResponses>

  ```json
  {
    "id": "usr_abc123",
    "name": "Jane Doe",
    "email": "jane@example.com",
    "role": "admin",
    "createdAt": "2026-04-01T10:00:00Z"
  }
  ```

  ```json
  {
    "error": "Validation failed",
    "message": "Email already exists",
    "code": 409
  }
  ```

  </CodeblockTabsResponses>
</CodeDrawer>
````