Passer au contenu principal
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. 
console.log("Hello World");
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 pour les options de configuration. Les groupes de code se synchronisent automatiquement avec les autres groupes de code et les onglets 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.

​
Créer des groupes de code

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. 
<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>
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.
helloWorld.js
console.log("Hello World");

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