Formater le code

Ajout d’exemples de code

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.

Code en ligne

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

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

Blocs de code

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

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 pour les code blocks

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

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

Syntaxe des options

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 ''.

Coloration syntaxique

Activez la coloration syntaxique en indiquant le langage de programmation après les backticks ouvrants d’un bloc de code. Nous utilisons Shiki pour la coloration syntaxique et prenons en charge tous les langages disponibles. Consultez la liste complète des langages 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 personnalisés pour les modes clair et sombre. Consultez la page Settings 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 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éeAjoutez 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, 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 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.

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

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

Titre

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.

const hello = "world";

```javascript Exemple de titre
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 spécifiques dans vos blocs de code en utilisant highlight avec les numéros ou plages de lignes que vous souhaitez surligner.

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

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

Mise en évidence des lignes

Mettez en évidence des lignes spécifiques dans vos blocs de code en utilisant 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 à gauche de votre code block à l’aide de lines.

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

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

Dépliable

Permet aux utilisateurs de développer et de replier de longs code block à 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 automatique pour les longues lignes avec wrap. Cela empêche le défilement horizontal et rend les longues lignes plus faciles à lire.

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 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).

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

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

Composant CodeBlock

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.

Props

string

Le langage de programmation pour la coloration syntaxique.

string

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

string

L’icône à afficher dans l’en-tête du code block. Voir Icons pour les options disponibles.

boolean

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

boolean

Indique s’il faut appliquer un retour à la ligne dans le code block.

boolean

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

string

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

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

Exemple

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

Premiers pas

Organiser

Personnaliser

Créer du contenu

Documenter les API

Déployer

Optimiser

Ajout d’exemples de code

Code en ligne

Blocs de code

Options pour les code blocks

Syntaxe des options

Coloration syntaxique

Twoslash

Titre

Icône

Surlignage de lignes

Mise en évidence des lignes

Afficher les numéros de ligne

Dépliable

Retour à la ligne

Diff

Composant CodeBlock

Props

Exemple

​Ajout d’exemples de code

​Code en ligne

​Blocs de code

​Options pour les code blocks

​Syntaxe des options

​Coloration syntaxique

​Twoslash

​Titre

​Icône

​Surlignage de lignes

​Mise en évidence des lignes

​Afficher les numéros de ligne

​Dépliable

​Retour à la ligne

​Diff

​Composant CodeBlock

​Props

​Exemple

Ajout d’exemples de code

Code en ligne

Blocs de code

Options pour les code blocks

Syntaxe des options

Coloration syntaxique

Twoslash

Titre

Icône

Surlignage de lignes

Mise en évidence des lignes

Afficher les numéros de ligne

Dépliable

Retour à la ligne

Diff

Composant CodeBlock

Props

Exemple