> ## Documentation Index
> Fetch the complete documentation index at: https://wiki.another-horizon.eu/llms.txt
> Use this file to discover all available pages before exploring further.

# Formater le code

> Afficher et mettre en forme le code inline et les blocs de code.

<div id="adding-code-samples">
  ## Ajout d'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 méta pour la coloration syntaxique, les titres, la mise en surbrillance de lignes, les icônes, et plus encore.

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

Pour marquer un `mot` ou une `expression` comme code, encadrez-le de backticks (\`).

```mdx theme={null}
Pour désigner un `mot` ou une `phrase` en tant que code, entourez-les d'accents graves (`).
```

<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 accents graves. Les blocs de code peuvent être copiés et, si vous avez activé l’Assistant, les utilisateurs peuvent demander à l’IA d’expliquer le code.

Indiquez le langage de programmation pour la coloration syntaxique et pour activer les options méta. Ajoutez toutes les options méta, comme un titre ou une icône, après le langage.

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

  ````mdx Format theme={null}
  ```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 pour les code blocks
</div>

Ajoutez des options meta à vos code blocks pour personnaliser leur apparence.

<Note>
  Vous devez spécifier un langage de programmation pour un code block avant de pouvoir ajouter d’autres options meta.
</Note>

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

* **Options chaînes de caractères et booléennes** : Entourez-les de `""`, `''` ou ne mettez pas de 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 backticks ouvrants d'un bloc de code.

Nous utilisons [Shiki](https://shiki.style/) pour la coloration syntaxique et prenons 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 blocs de code 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. Consultez la page [Settings](/fr/organize/settings#param-styling) pour les options de configuration.

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

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

<Accordion title="Thème de coloration syntaxique personnalisé">
  Pour des thèmes personnalisés, définissez votre thème dans `docs.json` sur `"css-variables"` et surchargez les couleurs de la 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 jetons**

  * `--mint-token-constant` : Constantes et littéraux
  * `--mint-token-string` : Valeurs de chaîne de caractères
  * `--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 de caractères
  * `--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 la coloration syntaxique pour les langages qui ne font pas partie de l'ensemble par défaut de Shiki en fournissant des fichiers de grammaire TextMate personnalisés. Créez un fichier JSON conforme au [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 theme={null}
  {
    "styling": {
      "codeblocks": {
        "languages": {
          "custom": ["/languages/my-custom-language.json"]
        }
      }
    }
  }
  ```
</Accordion>

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

Dans les blocs de code JavaScript et TypeScript, utilisez `twoslash` pour activer des informations de type 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 theme={null}
  type Pet = "cat" | "dog" | "hamster";

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

  // Survolez pour voir les types inférés
  const message = adoptPet("Mintie", "cat");
  ```

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

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

  // Survolez pour voir les types inférés
  const message = adoptPet("Mintie", "cat");
  ```
  ````
</CodeGroup>

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

Ajoutez un titre pour légender votre exemple de code. Utilisez `title="Your title"` ou une chaîne de caractères sur une seule ligne.

<CodeGroup>
  ```javascript Exemple de titre theme={null}
  const hello = "world";
  ```

  ````mdx Format theme={null}
  ```javascript Exemple de titre
  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 theme={null}
  const hello = "world";
  ```

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

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

Mettez en évidence des lignes spécifiques dans vos blocs de code en utilisant `highlight` avec les numéros ou plages de lignes que vous souhaitez surligner.

<CodeGroup>
  ```javascript Exemple de surlignage de lignes {1,2,5} theme={null}
  const greeting = "Hello, World!";
  function sayHello() {
    console.log(greeting);
  }
  sayHello();
  ```

  ````mdx Format theme={null}
  ```javascript Exemple de surlignage de lignes highlight={1-2,5}
  const greeting = "Hello, World!";
  function sayHello() {
    console.log(greeting);
  }
  sayHello();
  ```
  ````
</CodeGroup>

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

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

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

  ````mdx Format theme={null}
  ```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 à gauche de votre code block à l’aide de `lines`.

<CodeGroup>
  ```javascript Show line numbers example lines theme={null}
  const greeting = "Hello, World!";
  function sayHello() {
    console.log(greeting);
  }
  sayHello();
  ```

  ````mdx Format theme={null}
  ```javascript Show line numbers example lines
  const greeting = "Hello, World!";
  function sayHello() {
    console.log(greeting);
  }
  sayHello();
  ```
  ````
</CodeGroup>

<div id="expandable">
  ### Dépliable
</div>

Permet aux utilisateurs de développer et de replier de longs code block à l'aide de `expandable`.

<CodeGroup>
  ```python Expandable example expandable theme={null}
  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 theme={null}
  ```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 automatique pour les longues lignes avec `wrap`. Cela empêche le défilement horizontal et rend les longues lignes plus faciles à lire.

<CodeGroup>
  ```javascript Wrap example wrap theme={null}
  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 theme={null}
  ```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="diff">
  ### Diff
</div>

Affichez un diff visuel des lignes ajoutées ou supprimées dans vos code blocks. Les lignes ajoutées sont surlignées en vert et les lignes supprimées en rouge.

Pour créer un diff, ajoutez ces commentaires spéciaux à la fin des lignes dans votre code block :

* `// [!code ++]` : Marque une ligne comme ajoutée (surlignage vert).
* `// [!code --]` : Marque une ligne comme supprimée (surlignage rouge).

Pour plusieurs lignes consécutives, indiquez le nombre de lignes après un deux-points :

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

La syntaxe de commentaire doit correspondre à votre langage de programmation (par exemple, `//` pour JavaScript ou `#` pour Python).

<CodeGroup>
  ```js Exemple de lignes avec diff theme={null}
  const greeting = "Hello, World!"; // [!code ++]
  function sayHello() {
    console.log("Hello, World!"); // [!code --]
    console.log(greeting); // [!code ++]
  }
  sayHello();
  ```

  ````text Format theme={null}
  ```js Exemple de lignes avec diff
  const greeting = "Hello, World!"; // [!code ++]
  function sayHello() {
    console.log("Hello, World!"); // [!code --]
    console.log(greeting); // [!code ++]
  }
  sayHello();
  ```
  ````
</CodeGroup>

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

Utilisez le composant `<CodeBlock>` au sein de composants React personnalisés pour générer 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 code block.
</ResponseField>

<ResponseField name="icon" type="string">
  L'icône à afficher dans l'en-tête du code block. Voir [Icons](/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 appliquer un retour à la ligne dans le code block.
</ResponseField>

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

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

<ResponseField name="focus" type="string">
  Les lignes sur lesquelles mettre l'accent. Indiquez un tableau de nombres converti en chaîne de caractères. Exemple :
  `"[1,3,4,5]"`.
</ResponseField>

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

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