> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify-mintlify-add-letter-a-quickstart-82277.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Code

> Afficher du code en ligne et des code blocks

<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 titles, la mise en évidence de lignes, les icons, et plus encore.

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

Pour indiquer qu’un `mot` ou une `expression` est du code, encadrez-le avec des accents graves (\`).

```mdx
Pour désigner un `mot` ou une `phrase` comme du code, entourez-le de backticks (`).
```

<div id="code-blocks">
  ### Code blocks
</div>

Utilisez des [fenced code blocks](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks) en entourant le code de trois backticks. Les code blocks sont copiables 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 title ou un icon, après le langage.

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

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

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

Vous pouvez ajouter 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'ajouter d'autres options méta.
</Note>

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

* **Options de chaînes et booléens** : Encadrez avec `""`, `''` ou sans guillemets.
* **Options d’expression** : Encadrez avec `{}`, `""` 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 code block.

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 les thèmes des code blocks à l’échelle du site 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 [Paramètres](/fr/settings#styling) pour des options de configuration détaillées.

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

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

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

Ajoutez un titre pour identifier votre exemple de code. Utilisez `title="Your title"` ou une chaîne sur une seule ligne.

```javascript Code Block Example
const hello = "monde";
```

````mdx
```javascript Exemple de bloc de code
const hello = "world";
```
````

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

Ajoutez un icon à votre code block à l'aide de la propriété `icon`. Voir [Icônes](/fr/components/icons) pour toutes les options disponibles.

```javascript icon="square-js"
const hello = "monde";
```

````mdx
```javascript icon="square-js"
const hello = "world";
```
````

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

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

```javascript Line Highlighting Example highlight= {1-2,5}
const greeting = "Bonjour, le monde !";
function sayHello() {
  console.log(greeting);
}
sayHello();
```

````mdx
```javascript Exemple de mise en évidence de lignes highlight={1-2,5}
const greeting = "Hello, World!";
function sayHello() {
  console.log(greeting);
}
sayHello();
```
````

<div id="line-focusing">
  ### Mise au point sur des lignes
</div>

Concentrez-vous sur des lignes spécifiques dans vos code block en utilisant `focus` avec des numéros de ligne ou des intervalles.

```javascript Line Focus Example focus= {2,4-5}
const greeting = "Bonjour, le monde !";
function sayHello() {
  console.log(greeting);
}
sayHello();
```

````mdx
```javascript Exemple de mise en évidence de ligne focus={2,4-5}
const greeting = "Hello, World!";
function sayHello() {
  console.log(greeting);
}
sayHello();
```
````

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

Affichez les numéros de ligne à gauche de votre code block avec `lines`.

```javascript Show Line Numbers Example lines
const greeting = "Bonjour, le monde !";
function sayHello() {
  console.log(greeting);
}
sayHello();
```

````mdx
```javascript Show Line Numbers Exemple lines
const greeting = "Hello, World!";
function sayHello() {
  console.log(greeting);
}
sayHello();
```
````

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

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

```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]] = {}  # usager -> liste des ISBN

    def add_book(self, book: Book) -> None:
        if book.isbn in self.books:
            raise ValueError(f"Livre avec l'ISBN {book.isbn} existe déjà")
        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("Livre introuvable")

        if book.checked_out:
            raise ValueError("Le livre est déjà emprunté")

        if len(self.checkouts[patron]) >= 3:
            raise ValueError("L'usager a atteint la limite d'emprunt")

        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("Livre introuvable ou non emprunté")

        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

        # Retirer des emprunts de l'usager
        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()

    # Ajouter quelques livres
    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)

    # Exemple d'emprunt et de retour
    library.checkout_book("978-0-261-10295-4", "patron123")
    late_fee = library.return_book("978-0-261-10295-4")
    print(f"Frais de retard : {late_fee:.2f} $")

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

````mdx
```python Exemple extensible expandable
from datetime import datetime, timedelta
from typing import Dict, List, Optional
from dataclasses import dataclass

# ...

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

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

Activez l’habillage du texte pour les lignes longues avec `wrap`. Cela évite le défilement horizontal et facilite la lecture des lignes longues.

```javascript Wrap Example wrap
const greeting = "Bonjour, le monde ! Je suis une longue ligne de texte qui va passer à la ligne suivante.";
function sayHello() {
  console.log(greeting);
}
sayHello();
```

````mdx
```javascript Exemple de retour à la ligne
const greeting = "Bonjour, le monde ! Je suis une longue ligne de texte qui va se retourner à la ligne suivante.";
function sayHello() {
  console.log(greeting);
}
sayHello();
```
````

<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 mises en évidence en vert et les lignes supprimées en rouge.

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

* `// [!code ++]` : Marquez une ligne comme ajoutée (mise en évidence en vert).
* `// [!code --]` : Marquez une ligne comme supprimée (mise en évidence en rouge).

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

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

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

```js Diff Example icon="code" lines
const greeting = "Bonjour, le monde !"; // [!code ++]
function sayHello() {
  console.log("Bonjour, le monde !"); // [!code --]
  console.log(greeting); // [!code ++]
}
sayHello();
```

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