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");

​

Créer des groupes de code

Pour créer un groupe de code, entourez plusieurs blocs de code avec des balises <CodeGroup>. Chaque bloc de code doit inclure un titre, qui deviendra le libellé de l’onglet.

<CodeGroup>

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

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

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

</CodeGroup>

​

Liste déroulante de langue

Vous pouvez remplacer les onglets d’un groupe de code par un menu déroulant pour basculer entre les langues en utilisant la prop dropdown.

helloWorld.js

JavaScript

console.log("Hello World");

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