Vous pouvez ajouter du code en ligne ou des blocs de code. Les blocs de code prennent en charge des options méta pour la coloration syntaxique, les titres, la mise en évidence de lignes, les icônes, et plus encore.
Pour indiquer qu’un mot
ou une expression
est du code, entourez-le de backticks (`).
Pour indiquer qu’un « mot » ou une « expression » est du code, entourez-le de backticks (`).
Utilisez des blocs de code délimités en encadrant le code de trois accents graves. Les blocs de code sont copiables et, si l’Assistant est activé, 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 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("Bonjour, le monde !");
}
}
```java HelloWorld.java lines icon="java"
class HelloWorld {
public static void main(String[] args) {
System.out.println("Bonjour, monde !");
}
}
```
Options des blocs de code
Vous pouvez ajouter des options méta à vos blocs de code pour personnaliser leur apparence.
Vous devez indiquer un langage de programmation pour un bloc de code avant d’ajouter toute autre option méta.
- Options de type chaîne et booléen : Entourez-les avec
""
, ''
, ou ne mettez pas de guillemets.
- Options d’expression : Entourez-les avec
{}
, ""
, ou ''
.
Activez la coloration syntaxique en spécifiant le langage de programmation après les backticks d’ouverture d’un bloc de code.
Nous utilisons Shiki pour la coloration syntaxique et prenons en charge toutes les langues disponibles. Consultez la liste complète des langues dans la documentation de Shiki.
class HelloWorld {
public static void main(String[] args) {
System.out.println("Bonjour, le monde !");
}
}
```java
class HelloWorld {
public static void main(String[] args) {
System.out.println("Bonjour, le monde !");
}
}
```
Ajoutez un titre pour identifier votre exemple de code. Utilisez title="Votre titre"
ou une chaîne sur une seule ligne.
```javascript Exemple de bloc de code
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.
```javascript icon="square-js"
const hello = "monde";
```
Mettez en surbrillance des lignes spécifiques dans vos blocs de code à l’aide de highlight
, en indiquant les numéros de ligne ou les plages à mettre en évidence.
Exemple de surlignage de lignes
const greeting = "Bonjour, monde !";
function direBonjour() {
console.log(greeting);
}
direBonjour();
```javascript Exemple de surlignage de lignes highlight={1-2,5}
const greeting = "Bonjour, monde !";
function sayHello() {
console.log(greeting);
}
sayHello();
```
Mise au point sur des 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.
Exemple de mise au point sur les lignes
const greeting = "Bonjour, monde !";
function direBonjour() {
console.log(greeting);
}
direBonjour();
```javascript Exemple de surlignage de lignes focus={2,4-5}
const greeting = "Bonjour, le monde !";
function sayHello() {
console.log(greeting);
}
sayHello();
```
Afficher les numéros de ligne
Affichez les numéros de ligne à gauche de votre bloc de code avec lines
.
Afficher les numéros de ligne Exemple de lignes
const greeting = "Bonjour, monde !";
function direBonjour() {
console.log(greeting);
}
direBonjour();
```javascript Afficher les numéros de ligne Exemples de lignes
const greeting = "Bonjour, le monde !";
function sayHello() {
console.log(greeting);
}
sayHello();
```
Permettez aux utilisateurs d’ouvrir et de réduire de longs blocs de code à l’aide de expandable
.
Exemple extensible extensible
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"Un 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’emprunts")
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()
```python Exemple extensible
from datetime import datetime, timedelta
from typing import Dict, List, Optional
from dataclasses import dataclass
# ...
if __name__ == "__main__":
main()
```
Activez le renvoi à la ligne pour les longues lignes avec wrap
. Cela évite le défilement horizontal et facilite la lecture des lignes longues.
const greeting = "Bonjour, monde ! Je suis une longue ligne de texte qui passera à la ligne suivante.";
function sayHello() {
console.log(greeting);
}
sayHello();
```javascript Exemple d’habillage wrap
const greeting = "Bonjour, monde ! Je suis une longue ligne de texte qui va se poursuivre à la ligne suivante.";
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 en rouge.
Pour créer des diffs, ajoutez ces commentaires spéciaux à la fin des lignes dans votre bloc de code :
// [!code ++]
: Indique qu’une ligne a été ajoutée (mise en évidence en vert).
// [!code --]
: Indique qu’une ligne a été supprimée (mise en évidence en rouge).
Pour plusieurs lignes consécutives, spécifiez le nombre de lignes après un deux-points :
// [!code ++:3]
: Indique que la ligne actuelle plus les deux suivantes ont été ajoutées.
// [!code --:5]
: Indique que la ligne actuelle plus les quatre suivantes ont été supprimées.
La syntaxe des commentaires doit correspondre à votre langage de programmation (par exemple, //
pour JavaScript ou #
pour Python).
const greeting = "Bonjour, monde !";
function sayHello() {
console.log("Bonjour, monde !");
console.log(greeting);
}
sayHello();
```js Exemple de diff icon="code" lines
const greeting = "Bonjour, monde !"; // [!code ++]
function sayHello() {
console.log("Bonjour, monde !"); // [!code --]
console.log(greeting); // [!code ++]
}
sayHello();
```