Cajón de código
2 min
Cajón de código muestran ejemplos de solicitudes y muestras de respuestas en la columna derecha de un diseño de dos columnas. Úselos para crear documentación de API interactiva.
Sintaxis
Usted puede agregar este componente usando Markdown o MDX.
::::CodeDrawer{title="Endpoint Name"}
:::CodeblockTabsExamples
(Code blocks with request examples)
:::
:::CodeblockTabsResponses
(Code blocks with response examples)
:::
::::Un cajón de código consta de dos secciones:
- CodeblockTabsExamples para ejemplos de solicitudes.
- CodeblockTabsResponses para muestras de respuestas.
Cada sección puede contener uno o más bloques de código con vallas. Cuando hay varios bloques de código, se agrupan automáticamente en pestañas por lenguaje.
Los cajones de código se muestran en la columna derecha cuando se usan dentro de un diseño de dos columnas.
Ejemplo de MDX
El siguiente ejemplo crea un cajón de código con ejemplos de solicitudes en JavaScript, Python y Bash, junto con respuestas exitosas y de error.
<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: '[email protected]',
role: 'admin'
})
})
const user = await response.json()
```
```python
import requests
response = requests.post('https://api.example.com/users', json={
'name': 'Jane Doe',
'email': '[email protected]',
'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":"[email protected]","role":"admin"}'
```
</CodeblockTabsExamples>
<CodeblockTabsResponses>
```json
{
"id": "usr_abc123",
"name": "Jane Doe",
"email": "[email protected]",
"role": "admin",
"createdAt": "2026-04-01T10:00:00Z"
}
```
```json
{
"error": "Validation failed",
"message": "Email already exists",
"code": 409
}
```
</CodeblockTabsResponses>
</CodeDrawer>Have a question?
Our super-smart AI, knowledgeable support team and an awesome community will get you an answer in a flash.
To ask a question or participate in discussions, you'll need to authenticate first.