Mise en forme du code

Ajouter des exemples de code

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.

Code en ligne

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

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

Blocs de code

Utilisez des blocs de code délimités 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.

class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

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

Options de code block

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

Vous devez spécifier un langage de programmation pour un code block avant d’ajouter d’autres options méta.

Syntaxe des options

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

Coloration syntaxique

Activez la coloration syntaxique en indiquant le langage de programmation après les premiers backticks d’un code block. Mintlify utilise Shiki pour la coloration syntaxique et prend en charge tous les langages disponibles. Consultez la liste complète des langages 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 personnalisés pour les modes clair et sombre. Voir Paramètres pour les options de configuration.

class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

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

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éeAjoutez 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, 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.

docs.json

{
  "styling": {
    "codeblocks": {
      "languages": {
        "custom": ["/languages/my-custom-language.json"]
      }
    }
  }
}

Twoslash

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.

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

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

Titre

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.

const hello = "world";

const hello = "world";

```javascript Example title
const hello = "world";
```

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

Icône

Ajoutez une icône à votre bloc de code à l’aide de la propriété icon. Consultez Icônes pour voir toutes les options disponibles.

const hello = "world";

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

Surlignage de lignes

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.

const greeting = "Hello, World!";
function sayHello() {
  console.log(greeting);
}
sayHello();

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

Mise en évidence de lignes

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.

const greeting = "Hello, World!";
function sayHello() {
  console.log(greeting);
}
sayHello();

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

Afficher les numéros de ligne

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

const greeting = "Hello, World!";
function sayHello() {
  console.log(greeting);
}
sayHello();

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

Repliable

Permettez aux utilisateurs d’ouvrir et de replier de longs code blocks à l’aide de 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()

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

# ...

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

Retour à la ligne

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.

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

```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();
```

Diff

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.

const greeting = "Hello, World!"; 
function sayHello() {
  console.log("Hello, World!"); 
  console.log(greeting); 
}
sayHello();

def greet():
    print("Hello, World!")  
    print("Hello, Mintlify!")  

greet()

```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()
```

Composant CodeBlock

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.

Props

language

string

Le langage de programmation pour la coloration syntaxique.

filename

string

Le nom de fichier à afficher dans l’en-tête du bloc de code.

icon

string

L’icône à afficher dans l’en-tête du bloc de code. Voir Icônes pour les options disponibles.

lines

boolean

Indique s’il faut afficher les numéros de ligne.

wrap

boolean

Indique s’il faut effectuer un retour à la ligne dans le bloc de code.

expandable

boolean

Indique s’il faut développer le bloc de code.

highlight

string

Les lignes à mettre en évidence. Fournissez un tableau de nombres sous forme de chaîne de caractères. Exemple : "[1,3,4,5]".

focus

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]".

Exemple

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

​Ajouter des exemples de code

​Code en ligne

​Blocs de code

​Options de code block

​Syntaxe des options

​Coloration syntaxique

​Twoslash

​Titre

​Icône

​Surlignage de lignes

​Mise en évidence de lignes

​Afficher les numéros de ligne

​Repliable

​Retour à la ligne

​Diff

​Composant CodeBlock

​Props

​Exemple

Ajouter des exemples de code

Code en ligne

Blocs de code

Options de code block

Syntaxe des options

Coloration syntaxique

Twoslash

Titre

Icône

Surlignage de lignes

Mise en évidence de lignes

Afficher les numéros de ligne

Repliable

Retour à la ligne

Diff

Composant CodeBlock

Props

Exemple