Groupes de code

Afficher plusieurs exemples de code dans un seul composant

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

helloWorld.js

console.log("Hello World");

Les groupes de code héritent du style global défini dans votre fichier docs.json. Personnalisez votre thème avec styling.codeblocks. Consultez Paramètres pour les options de configuration.

​

Création de 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("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>

​

Menu déroulant de langue

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

JavaScript

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>