Mise en forme du 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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 :

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

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.

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