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 n'importe quel contenu), CodeGroup extrait automatiquement les étiquettes de langage et préserve la coloration syntaxique dans tous les onglets.

Utilisez CodeGroup pour :

• Afficher des appels API dans plusieurs langages (cURL, Python, JavaScript)
• Comparer des implémentations entre frameworks
• Afficher plusieurs fichiers dans un parcours 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

Affichez 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
});

Masquer le bouton de copie sur un onglet

Ajoutez nocopy à un bloc de code pour retirer le bouton de copie sur cet onglet uniquement — les autres onglets du groupe conservent le leur :

curl -X POST https://api.example.com/users \
  -H "Authorization: Bearer $TOKEN"

<CodeGroup>
```bash cURL nocopy
curl -X POST https://api.example.com/users \
  -H "Authorization: Bearer $TOKEN"
```

```javascript Node.js
const response = await fetch('https://api.example.com/users', {
  method: 'POST',
  headers: { 'Authorization': `Bearer ${TOKEN}` }
});
```
</CodeGroup>

Utilisez-le pour un onglet qui ne doit pas être copié tel quel, comme un exemple cURL avec un jeton de remplacement, tout en laissant les exemples fonctionnels des autres onglets copiables. Voir Blocs de code → Masquer le bouton de copie pour l'indicateur sur un bloc autonome.

CodeGroup vs Tabs

Règle générale : utilisez CodeGroup pour les exemples de code en plusieurs langages. Utilisez Tabs lorsque vous avez besoin d'une synchronisation sur la page ou de contenu non lié au code.

Conseils

• Placez le langage le plus courant en premier (sélectionné par défaut)
• Les étiquettes 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 ?