mintlify__docs/fr/create/code.mdx

---
title: "Mise en forme du code"
description: "Formatez le code dans votre documentation avec coloration syntaxique, numéros de ligne, diffs, boutons de copie et groupes de code interactifs en MDX."
keywords: ["code blocks", "coloration syntaxique", "mise en forme du code"]
---

<div id="adding-code-samples">
  ## Ajouter des exemples de code
</div>

Vous pouvez ajouter des extraits de code en ligne ou des code blocks. Les code blocks prennent en charge des options de métadonnées pour la coloration syntaxique, les titles, la mise en évidence de lignes, les icon, et plus encore.

<div id="inline-code">
  ### Code en ligne
</div>

Pour indiquer qu’un `mot` ou une `expression` est du code, encadrez-le de backticks (`).

```mdx
Pour indiquer qu'un `mot` ou une `expression` est du code, encadrez-le de backticks (`).
```

<div id="code-blocks">
  ### Blocs de code
</div>

Utilisez des [blocs de code délimités](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks) en entourant le code de trois backticks. Les blocs de code sont copiables et, si vous avez activé l’Assistant, les utilisateurs peuvent demander à l’Assistant d’expliquer le code.

Spécifiez le langage de programmation pour la mise en évidence syntaxique et pour activer les options méta. Ajoutez les options méta, comme un titre ou un icon, après le langage.

<Tip>
  Pour afficher plusieurs blocs de code ensemble sous forme d'onglets (comme le font les exemples de cette page), englobez-les dans le composant [`CodeGroup`](/fr/components/code-groups). Le titre de chaque bloc de code devient son libellé d'onglet.
</Tip>

<CodeGroup>
  ```java HelloWorld.java example icon=java lines
  class HelloWorld {
      public static void main(String[] args) {
          System.out.println("Hello, World!");
      }
  }
  ```

  ````mdx Format
  ```java HelloWorld.java example lines icon="java"
  class HelloWorld {
      public static void main(String[] args) {
          System.out.println("Hello, World!");
      }
  }
  ```
  ````
</CodeGroup>

<div id="code-block-options">
  ## Options de code block
</div>

Ajoutez des options méta à vos code blocks pour personnaliser leur apparence.

<Note>
  Vous devez spécifier un langage de programmation pour un code block avant d&#39;ajouter d&#39;autres options méta.
</Note>

<div id="option-syntax">
  ### Syntaxe des options
</div>

* **Options de type chaîne ou booléen** : Entourez-les de `""`, `''` ou laissez sans guillemets.
* **Options d’expression** : Entourez-les de `{}`, `""` ou `''`.

<div id="syntax-highlighting">
  ### Coloration syntaxique
</div>

Activez la coloration syntaxique en indiquant le langage de programmation après les premiers backticks d’un code block.

Mintlify utilise [Shiki](https://shiki.style/) pour la coloration syntaxique et prend en charge tous les langages disponibles. Consultez la liste complète des [langages](https://shiki.style/languages) dans la documentation de Shiki.

Personnalisez globalement les thèmes des code blocks avec `styling.codeblocks` dans votre fichier `docs.json`. Définissez des thèmes simples comme `system` ou `dark`, ou configurez des [thèmes Shiki](https://shiki.style/themes) personnalisés pour les modes clair et sombre. Voir [Paramètres](/fr/organize/settings-appearance#styling) pour les options de configuration.

<CodeGroup>
  ```java Exemple de coloration syntaxique
  class HelloWorld {
      public static void main(String[] args) {
          System.out.println("Hello, World!");
      }
  }
  ```

  ````mdx Format
  ```java Exemple de coloration syntaxique
  class HelloWorld {
      public static void main(String[] args) {
          System.out.println("Hello, World!");
      }
  }
  ```
  ````
</CodeGroup>

<Accordion title="Thème personnalisé de coloration syntaxique">
  Pour des thèmes personnalisés, définissez votre thème dans `docs.json` sur `"css-variables"` et surchargez les couleurs de coloration syntaxique à l’aide de variables CSS avec le préfixe `--mint-`.

  Les variables suivantes sont disponibles :

  **Couleurs de base**

  * `--mint-color-text` : Couleur de texte par défaut
  * `--mint-color-background` : Couleur d’arrière-plan

  **Couleurs de tokens**

  * `--mint-token-constant` : Constantes et littéraux
  * `--mint-token-string` : Valeurs de chaîne
  * `--mint-token-comment` : Commentaires
  * `--mint-token-keyword` : Mots-clés
  * `--mint-token-parameter` : Paramètres de fonction
  * `--mint-token-function` : Noms de fonction
  * `--mint-token-string-expression` : Expressions de chaîne
  * `--mint-token-punctuation` : Signes de ponctuation
  * `--mint-token-link` : Liens

  **Couleurs ANSI**

  * `--mint-ansi-black`, `--mint-ansi-black-dim`
  * `--mint-ansi-red`, `--mint-ansi-red-dim`
  * `--mint-ansi-green`, `--mint-ansi-green-dim`
  * `--mint-ansi-yellow`, `--mint-ansi-yellow-dim`
  * `--mint-ansi-blue`, `--mint-ansi-blue-dim`
  * `--mint-ansi-magenta`, `--mint-ansi-magenta-dim`
  * `--mint-ansi-cyan`, `--mint-ansi-cyan-dim`
  * `--mint-ansi-white`, `--mint-ansi-white-dim`
  * `--mint-ansi-bright-black`, `--mint-ansi-bright-black-dim`
  * `--mint-ansi-bright-red`, `--mint-ansi-bright-red-dim`
  * `--mint-ansi-bright-green`, `--mint-ansi-bright-green-dim`
  * `--mint-ansi-bright-yellow`, `--mint-ansi-bright-yellow-dim`
  * `--mint-ansi-bright-blue`, `--mint-ansi-bright-blue-dim`
  * `--mint-ansi-bright-magenta`, `--mint-ansi-bright-magenta-dim`
  * `--mint-ansi-bright-cyan`, `--mint-ansi-bright-cyan-dim`
  * `--mint-ansi-bright-white`, `--mint-ansi-bright-white-dim`

  **Coloration syntaxique personnalisée**

  Ajoutez une coloration syntaxique pour les langages qui ne figurent pas dans le jeu par défaut de Shiki en fournissant des fichiers de grammaire TextMate personnalisés. Créez un fichier JSON suivant le [format de grammaire TextMate](https://macromates.com/manual/en/language_grammars), puis référencez-le dans votre `docs.json`. Vous pouvez ajouter plusieurs langages personnalisés en incluant des chemins supplémentaires dans le tableau.

  ```json docs.json
  {
    "styling": {
      "codeblocks": {
        "languages": {
          "custom": ["/languages/my-custom-language.json"]
        }
      }
    }
  }
  ```
</Accordion>

<div id="twoslash">
  ### Twoslash
</div>

Dans les code blocks JavaScript et TypeScript, utilisez `twoslash` pour activer des informations de typage interactives. Les utilisateurs peuvent survoler les variables, les fonctions et les paramètres pour voir les types et les erreurs comme dans un IDE.

<CodeGroup>
  ```ts twoslash Twoslash example
  type Pet = "cat" | "dog" | "hamster";

  function adoptPet(name: string, type: Pet) {
    return `${name} the ${type} is now adopted!`;
  }

  // Hover to see the inferred types
  const message = adoptPet("Mintie", "cat");
  ```

  ````mdx Format
  ```ts twoslash Twoslash example
  type Pet = "cat" | "dog" | "hamster";

  function adoptPet(name: string, type: Pet) {
    return `${name} the ${type} is now adopted!`;
  }

  // Hover to see the inferred types
  const message = adoptPet("Mintie", "cat");
  ```
  ````
</CodeGroup>

<div id="title">
  ### Titre
</div>

Ajoutez un titre pour identifier votre exemple de code. Placez le titre après l'identifiant de langage. Les titres peuvent contenir plusieurs mots et des chemins de fichiers.

Vous pouvez définir le titre de deux manières :

- **En ligne** : Placez le titre directement après l'identifiant de langage.
- **Propriété `title`** : Utilisez `title="Your title"` pour les titres nécessitant des caractères spéciaux ou des guillemets explicites.

<CodeGroup>
  ```javascript Example title
  const hello = "world";
  ```

  ```javascript title="utils/hello.js"
  const hello = "world";
  ```

  ````mdx Inline format
  ```javascript Example title
  const hello = "world";
  ```
  ````

  ````mdx title property format
  ```javascript title="utils/hello.js"
  const hello = "world";
  ```
  ````
</CodeGroup>

<div id="icon">
  ### Icône
</div>

Ajoutez une icône à votre bloc de code à l’aide de la propriété `icon`. Consultez [Icônes](/fr/components/icons) pour voir toutes les options disponibles.

<CodeGroup>
  ```javascript Icon example icon=square-js
  const hello = "world";
  ```

  ````mdx Format
  ```javascript Icon example icon="square-js"
  const hello = "world";
  ```
  ````
</CodeGroup>

<div id="line-highlighting">
  ### Surlignage de lignes
</div>

Mettez en évidence des lignes précises dans vos blocs de code à l’aide de `highlight`, en indiquant les numéros de lignes ou les plages de lignes à surligner.

<CodeGroup>
  ```javascript Line highlighting example {1,2,5}
  const greeting = "Hello, World!";
  function sayHello() {
    console.log(greeting);
  }
  sayHello();
  ```

  ````mdx Format
  ```javascript Line highlighting example highlight={1-2,5}
  const greeting = "Hello, World!";
  function sayHello() {
    console.log(greeting);
  }
  sayHello();
  ```
  ````
</CodeGroup>

<div id="line-focusing">
  ### Mise en évidence de lignes
</div>

Mettez en évidence des lignes spécifiques dans vos blocs de code à l’aide de `focus` avec des numéros de ligne ou des plages.

<CodeGroup>
  ```javascript Line focusing example focus=2,4,5
  const greeting = "Hello, World!";
  function sayHello() {
    console.log(greeting);
  }
  sayHello();
  ```

  ````mdx Format
  ```javascript Line focusing example focus={2,4-5}
  const greeting = "Hello, World!";
  function sayHello() {
    console.log(greeting);
  }
  sayHello();
  ```
  ````
</CodeGroup>

<div id="show-line-numbers">
  ### Afficher les numéros de ligne
</div>

Affichez les numéros de ligne sur le côté gauche de votre bloc de code à l’aide de `lines`.

<CodeGroup>
  ```javascript Exemple d’affichage des numéros de ligne lines
  const greeting = "Hello, World!";
  function sayHello() {
    console.log(greeting);
  }
  sayHello();
  ```

  ````mdx Format
  ```javascript Exemple d’affichage des numéros de ligne lines
  const greeting = "Hello, World!";
  function sayHello() {
    console.log(greeting);
  }
  sayHello();
  ```
  ````
</CodeGroup>

<div id="expandable">
  ### Repliable
</div>

Permettez aux utilisateurs d’ouvrir et de replier de longs code blocks à l’aide de `expandable`.

<CodeGroup>
  ```python Expandable example expandable
  from datetime import datetime, timedelta
  from typing import Dict, List, Optional
  from dataclasses import dataclass

  @dataclass
  class Book:
  title: str
  author: str
  isbn: str
  checked_out: bool = False
  due_date: Optional[datetime] = None

  class Library:
      def __init__(self):
          self.books: Dict[str, Book] = {}
          self.checkouts: Dict[str, List[str]] = {} # patron -> list of ISBNs

      def add_book(self, book: Book) -> None:
          if book.isbn in self.books:
              raise ValueError(f"Book with ISBN {book.isbn} already exists")
          self.books[book.isbn] = book

      def checkout_book(self, isbn: str, patron: str, days: int = 14) -> None:
          if patron not in self.checkouts:
              self.checkouts[patron] = []

          book = self.books.get(isbn)
          if not book:
              raise ValueError("Book not found")

          if book.checked_out:
              raise ValueError("Book is already checked out")

          if len(self.checkouts[patron]) >= 3:
              raise ValueError("Patron has reached checkout limit")

          book.checked_out = True
          book.due_date = datetime.now() + timedelta(days=days)
          self.checkouts[patron].append(isbn)

      def return_book(self, isbn: str) -> float:
          book = self.books.get(isbn)
          if not book or not book.checked_out:
              raise ValueError("Book not found or not checked out")

          late_fee = 0.0
          if datetime.now() > book.due_date:
              days_late = (datetime.now() - book.due_date).days
              late_fee = days_late * 0.50

          book.checked_out = False
          book.due_date = None

          # Remove from patron's checkouts
          for patron, books in self.checkouts.items():
              if isbn in books:
                  books.remove(isbn)
                  break

          return late_fee

      def search(self, query: str) -> List[Book]:
          query = query.lower()
          return [
              book for book in self.books.values()
              if query in book.title.lower() or query in book.author.lower()
          ]

  def main():
      library = Library()

      # Add some books
      books = [
          Book("The Hobbit", "J.R.R. Tolkien", "978-0-261-10295-4"),
          Book("1984", "George Orwell", "978-0-452-28423-4"),
      ]

      for book in books:
          library.add_book(book)

      # Checkout and return example
      library.checkout_book("978-0-261-10295-4", "patron123")
      late_fee = library.return_book("978-0-261-10295-4")
      print(f"Late fee: ${late_fee:.2f}")

  if __name__ == "__main__":
      main()
  ```

  ````text Format
  ```python Expandable example expandable
  from datetime import datetime, timedelta
  from typing import Dict, List, Optional
  from dataclasses import dataclass

  # ...

  if __name__ == "__main__":
      main()
  ```
  ````
</CodeGroup>

<div id="wrap">
  ### Retour à la ligne
</div>

Activez le retour à la ligne pour les longues lignes à l’aide de `wrap`. Cela évite le défilement horizontal et facilite la lecture des longues lignes.

<CodeGroup>
  ```javascript Wrap example wrap
  const greeting =
    "Hello, World! I am a long line of text that will wrap to the next line.";
  function sayHello() {
    console.log(greeting);
  }
  sayHello();
  ```

  ````mdx Format
  ```javascript Wrap example wrap
  const greeting =
    "Hello, World! I am a long line of text that will wrap to the next line.";
  function sayHello() {
    console.log(greeting);
  }
  sayHello();
  ```
  ````
</CodeGroup>

<div id="hide-copy-button">
  ### Masquer le bouton de copie
</div>

Masquez le bouton de copie dans le presse-papiers d’un bloc de code à l’aide de `nocopy`. Utilisez cette option pour du contenu où la copie n’a pas de sens, comme des diagrammes ASCII ou la sortie d’un terminal.

Passez `nocopy="false"` pour afficher explicitement le bouton de copie. Pour un bloc de code sans langage, utilisez ` ```nocopy ` seul pour afficher le bloc en texte brut sans bouton de copie.

À l’intérieur d’un `<CodeGroup>`, vous pouvez définir la visibilité du bouton de copie pour chaque onglet.

<CodeGroup>
  ```text title="Exemple sans copie" nocopy
  User ──▶ CDN ──▶ Origin
                │
                └──▶ Cache
  ```

  ````mdx Format
  ```text title="Exemple sans copie" nocopy
  User ──▶ CDN ──▶ Origin
                │
                └──▶ Cache
  ```
  ````
</CodeGroup>

<div id="diff">
  ### Diff
</div>

Affichez un diff visuel des lignes ajoutées ou supprimées dans vos blocs de code. Les lignes ajoutées sont mises en évidence en vert et les lignes supprimées sont mises en évidence en rouge.

Ajoutez `[!code ++]` ou `[!code --]` dans un commentaire à la fin d’une ligne pour la marquer comme ajoutée ou supprimée. Utilisez la syntaxe de commentaire de votre langage :

| Langage | Ajoutées | Supprimées |
| --- | --- | --- |
| JavaScript, TypeScript, Java, C, C++, Go, Rust | `// [!code ++]` | `// [!code --]` |
| Python, Ruby, Bash, YAML | `# [!code ++]` | `# [!code --]` |
| HTML, XML | `<!-- [!code ++] -->` | `<!-- [!code --] -->` |
| CSS | `/* [!code ++] */` | `/* [!code --] */` |
| SQL, Lua | `-- [!code ++]` | `-- [!code --]` |

Pour plusieurs lignes consécutives, ajoutez un deux-points suivi du nombre de lignes :

* `// [!code ++:3]` : marque la ligne actuelle ainsi que les deux lignes suivantes comme ajoutées.
* `# [!code --:5]` : marque la ligne actuelle ainsi que les quatre lignes suivantes comme supprimées.

<CodeGroup>
  ```js JavaScript diff lines
  const greeting = "Hello, World!"; // [!code ++]
  function sayHello() {
    console.log("Hello, World!"); // [!code --]
    console.log(greeting); // [!code ++]
  }
  sayHello();
  ```

  ```python Python diff lines
  def greet():
      print("Hello, World!")  # [!code --]
      print("Hello, Mintlify!")  # [!code ++]

  greet()
  ```

  ````text JavaScript format
  ```js JavaScript diff lines
  const greeting = "Hello, World!"; // [!code ++]
  function sayHello() {
    console.log("Hello, World!"); // [!code --]
    console.log(greeting); // [!code ++]
  }
  sayHello();
  ```
  ````

  ````text Python format
  ```python Python diff lines
  def greet():
      print("Hello, World!")  # [!code --]
      print("Hello, Mintlify!")  # [!code ++]

  greet()
  ```
  ````
</CodeGroup>

<div id="codeblock-component">
  ## Composant CodeBlock
</div>

Utilisez le composant `<CodeBlock>` dans des composants React personnalisés pour afficher des code blocks de manière programmatique, avec le même style et les mêmes fonctionnalités que les code blocks en Markdown.

<div id="props">
  ### Props
</div>

<ResponseField name="language" type="string">
  Le langage de programmation pour la coloration syntaxique.
</ResponseField>

<ResponseField name="filename" type="string">
  Le nom de fichier à afficher dans l’en-tête du bloc de code.
</ResponseField>

<ResponseField name="icon" type="string">
  L’icône à afficher dans l’en-tête du bloc de code. Voir [Icônes](/fr/components/icons)
  pour les options disponibles.
</ResponseField>

<ResponseField name="lines" type="boolean">
  Indique s’il faut afficher les numéros de ligne.
</ResponseField>

<ResponseField name="wrap" type="boolean">
  Indique s’il faut effectuer un retour à la ligne dans le bloc de code.
</ResponseField>

<ResponseField name="nocopy" type="boolean">
  Indique s’il faut masquer le bouton de copie dans le presse-papiers.
</ResponseField>

<ResponseField name="expandable" type="boolean">
  Indique s’il faut développer le bloc de code.
</ResponseField>

<ResponseField name="highlight" type="string">
  Les lignes à mettre en évidence. Fournissez un tableau de nombres sous forme de chaîne de caractères. Exemple :
  `"[1,3,4,5]"`.
</ResponseField>

<ResponseField name="focus" type="string">
  Les lignes sur lesquelles se concentrer. Fournissez un tableau de nombres sous forme de chaîne de caractères. Exemple :
  `"[1,3,4,5]"`.
</ResponseField>

<div id="example">
  ### Exemple
</div>

```jsx
export const CustomCodeBlock = ({
  filename,
  icon,
  language,
  highlight,
  children,
}) => {
  return (
    <CodeBlock
      filename={filename}
      icon={icon}
      language={language}
      lines
      highlight={highlight}
    >
      {children}
    </CodeBlock>
  );
};
```