Tiroir de code
Tiroir de code affichent des exemples de requêtes et des exemples de réponses dans la colonne de droite d’une mise en page à deux colonnes. Utilisez-les pour créer une documentation API interactive.
Syntaxe
Vous pouvez ajouter ce composant en utilisant soit Markdown soit MDX.
::::CodeDrawer{title="Endpoint Name"}
:::CodeblockTabsExamples
(Code blocks with request examples)
:::
:::CodeblockTabsResponses
(Code blocks with response examples)
:::
::::Un tiroir de code se compose de deux sections :
- CodeblockTabsExamples pour les exemples de requêtes.
- CodeblockTabsResponses pour les exemples de réponses.
Chaque section peut contenir un ou plusieurs blocs de code délimités. Lorsque plusieurs blocs de code sont présents, ils sont automatiquement regroupés en onglets par langage.
Les tiroirs de code sont affichés dans la colonne de droite lorsqu’ils sont utilisés dans une mise en page à deux colonnes.
Exemple MDX
L’exemple suivant crée un tiroir de code avec des exemples de requêtes en JavaScript, Python et Bash, ainsi que des réponses réussies et des réponses d’erreur.
<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>