mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
locadex-agent[bot]
bbb1a08ed3
Co-authored-by: locadex-agent[bot] <217277504+locadex-agent[bot]@users.noreply.github.com>
101 lines
2.4 KiB
Plaintext
101 lines
2.4 KiB
Plaintext
---
|
||
title: "Groupes de code"
|
||
description: "Afficher plusieurs exemples de code dans un seul composant"
|
||
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#styling) pour les options de configuration.
|
||
|
||
<div id="creating-code-groups">
|
||
## Création de 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("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>
|
||
````
|
||
|
||
<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>
|
||
````
|