mintlify__docs/fr/components/code-groups.mdx

---
title: "Groupes de code"
description: "Utilisez le composant CodeGroup pour afficher plusieurs exemples de code dans une interface à onglets et comparer les implémentations entre langages."
keywords: ["groupes de code", "code avec onglets", "exemples multilingues", "CodeGroup"]
---

Utilisez le composant `CodeGroup` pour afficher plusieurs blocs de code dans une interface à onglets, permettant aux utilisateurs de comparer des implémentations dans différents langages de programmation ou d’examiner des approches alternatives pour la même tâche.

<CodeGroup>
  ```javascript helloWorld.js
  console.log("Hello World");
  ```

  ```python hello_world.py
  print('Hello World!')
  ```

  ```java HelloWorld.java
  class HelloWorld {
      public static void main(String[] args) {
          System.out.println("Hello, World!");
      }
  }
  ```
</CodeGroup>

Les groupes de code héritent de la mise en forme globale de votre fichier `docs.json`. Personnalisez votre thème avec `styling.codeblocks`. Consultez [Paramètres](/fr/organize/settings-appearance#styling) pour les options de configuration.

Les groupes de code se synchronisent automatiquement avec les autres groupes de code et les [onglets](/fr/components/tabs) sur la même page lorsque leurs libellés correspondent. Lorsque vous sélectionnez un langage dans un groupe de code, tous les onglets et groupes de code avec des libellés correspondants se mettent à jour pour afficher le même langage.

<div id="create-code-groups">
  ## Créer des groupes de code
</div>

Pour créer un groupe de code, enveloppez plusieurs code blocks avec des balises `<CodeGroup>`. Chaque code block doit inclure un Titre, qui devient le label de l’Onglet.

````mdx
<CodeGroup>

```javascript helloWorld.js
console.log("Hello World");
```

```python hello_world.py
print('Hello World!')
```

```java HelloWorld.java
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Bonjour le monde !");
    }
}
```

</CodeGroup>
````

<div id="language-dropdown">
  ## Menu déroulant de langue
</div>

Vous pouvez remplacer les onglets d’un groupe de code par un menu déroulant pour changer de langue à l’aide de la prop `dropdown`.

<CodeGroup dropdown>
  ```javascript helloWorld.js
  console.log("Hello World");
  ```

  ```python hello_world.py
  print('Hello World!')
  ```

  ```java HelloWorld.java
  class HelloWorld {
      public static void main(String[] args) {
          System.out.println("Hello, World!");
      }
  }
  ```
</CodeGroup>

````mdx highlight=1
<CodeGroup dropdown>

```javascript helloWorld.js
console.log("Bonjour le monde");
```

```python hello_world.py
print('Bonjour le monde !')
```

```java HelloWorld.java
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Bonjour, le monde !");
    }
}
```
</CodeGroup>
````