---
title: Groupe de code
description: Affiche des blocs de code dans une interface à onglets. Montrez la même opération dans plusieurs langages comme cURL, Python et JavaScript.
---

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 sur tous les onglets.

Utilisez CodeGroup quand :
- **Vous montrez des appels API** dans plusieurs langages (cURL, Python, JavaScript)
- **Vous comparez des implémentations** entre frameworks
- **Vous affichez plusieurs fichiers** dans une présentation de code

## Utilisation de base

<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>

````mdx
<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 API

Montrez des appels API dans différents formats :

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

```javascript Node.js
const response = await fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${TOKEN}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'John' })
});
```

```python Python
import requests

response = requests.post(
    'https://api.example.com/users',
    headers={'Authorization': f'Bearer {TOKEN}'},
    json={'name': 'John'}
)
```
</CodeGroup>

## Avec des noms de fichiers

Ajoutez des noms de fichiers aux blocs de code :

<CodeGroup>
```typescript src/client.ts
export const client = axios.create({
  baseURL: process.env.API_URL
});
```

```python client.py
import httpx

client = httpx.Client(base_url=os.environ['API_URL'])
```
</CodeGroup>

## CodeGroup vs Tabs

| Fonctionnalité | CodeGroup | Tabs |
|---------|-----------|------|
| Conçu pour | Blocs de code uniquement | Tout contenu |
| Étiquettes | Extraites automatiquement du langage | Attribut title manuel |
| Synchronisation | Non | Oui (sur toute la page) |
| Coloration syntaxique | Préservée par langage | Standard |

**Règle générale :** Utilisez CodeGroup pour les exemples de code en plusieurs langages. Utilisez Tabs quand vous avez besoin de synchronisation sur la page ou de contenu non-code.

## Conseils

- Mettez le langage le plus courant en premier (sélectionné par défaut)
- Les étiquettes des onglets proviennent du texte après l'identifiant de langage (ex. : `javascript Node.js`)
- L'onglet sélectionné persiste lors de la navigation entre les pages

## Et ensuite ?

<Columns cols={2}>
  <Card title="Aperçu des composants" icon="puzzle-piece" href="/fr/components/overview">
    Parcourez tous les composants disponibles
  </Card>
  <Card title="Bases MDX" icon="file-code" href="/fr/content/mdx-basics">
    Apprenez à utiliser les composants dans MDX
  </Card>
</Columns>