# Groupes de code (/fr/components/code-groups)

<!-- agent-signals: reading_time_min: 2 · est_tokens: 999 · updated: 2026-07-30 -->
Related: [Accordion](/fr/components/accordions.md), [Badge](/fr/components/badge.md), [Bannière](/fr/components/banner.md), [Encarts](/fr/components/callouts.md), [Cartes](/fr/components/cards.md), [Couleur](/fr/components/color.md)

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>
  <CodeBlockTabs defaultValue="helloWorld.js" groupId="hello-world-py+helloworld-java+helloworld-js">
    <CodeBlockTabsList>
      <CodeBlockTabsTrigger value="helloWorld.js">
        helloWorld.js
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="hello_world.py">
        hello_world.py
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="HelloWorld.java">
        HelloWorld.java
      </CodeBlockTabsTrigger>
    </CodeBlockTabsList>

    <CodeBlockTab value="helloWorld.js">
      ```javascript  
      console.log("Hello World");
      ```
    </CodeBlockTab>

    <CodeBlockTab value="hello_world.py">
      ```python  
      print('Hello World!')
      ```
    </CodeBlockTab>

    <CodeBlockTab value="HelloWorld.java">
      ```java  
      class HelloWorld {
          public static void main(String[] args) {
              System.out.println("Hello, World!");
          }
      }
      ```
    </CodeBlockTab>
  </CodeBlockTabs>
</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 [#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 [#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>
  <CodeBlockTabs defaultValue="helloWorld.js" groupId="hello-world-py+helloworld-java+helloworld-js">
    <CodeBlockTabsList>
      <CodeBlockTabsTrigger value="helloWorld.js">
        helloWorld.js
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="hello_world.py">
        hello_world.py
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="HelloWorld.java">
        HelloWorld.java
      </CodeBlockTabsTrigger>
    </CodeBlockTabsList>

    <CodeBlockTab value="helloWorld.js">
      ```javascript  
      console.log("Hello World");
      ```
    </CodeBlockTab>

    <CodeBlockTab value="hello_world.py">
      ```python  
      print('Hello World!')
      ```
    </CodeBlockTab>

    <CodeBlockTab value="HelloWorld.java">
      ```java  
      class HelloWorld {
          public static void main(String[] args) {
              System.out.println("Hello, World!");
          }
      }
      ```
    </CodeBlockTab>
  </CodeBlockTabs>
</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>
````