CodeGroup

CodeGroup affiche des blocs de code dans une interface à onglets, montrant la même opération dans plusieurs langages. Il est conçu spécifiquement pour le code. Contrairement à Tabs (qui fonctionne avec tout type de contenu), CodeGroup extrait automatiquement les libellés de langage et préserve la coloration syntaxique sur tous les onglets.

Utilisez CodeGroup lorsque :

• Vous montrez des appels API dans plusieurs langages (cURL, Python, JavaScript)
• Vous comparez des implémentations entre frameworks
• Vous affichez plusieurs fichiers dans un tutoriel de code

Utilisation de base

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>

Exemples d'API

Montrez des appels API dans différents formats :

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

Avec des noms de fichiers

Ajoutez des noms de fichiers aux blocs de code :

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

import httpx

client = httpx.Client(base_url=os.environ['API_URL'])

CodeGroup vs Tabs

Règle pratique : Utilisez CodeGroup pour les exemples de code multi-langages. Utilisez Tabs lorsque vous avez besoin d'une synchronisation sur toute la page ou de contenu non lié au code.

Conseils

• Placez le langage le plus courant en premier (sélectionné par défaut)
• Les libellés d'onglet proviennent du texte après l'identifiant de langage (par exemple, javascript Node.js)
• L'onglet sélectionné persiste lors de la navigation entre les pages

Et ensuite ?