Code et diagrammes

Coloration syntaxique

Entourez un bloc de code de trois accents graves et ajoutez une étiquette de langage :

```swift
struct Greeter {
    let name: String
    func greet() -> String { "Bonjour, \(name) !" }
}
```

s’affiche avec des couleurs syntaxiques, dans plus de 35 langages grâce à highlight.js, hors ligne, en suivant le mode clair et le mode sombre :

struct Greeter {
    let name: String
    func greet() -> String { "Bonjour, \(name) !" }
}

Il en va de même pour python, ruby, bash, json et bien d’autres :

def fib(n: int) -> int:
    return n if n < 2 else fib(n - 1) + fib(n - 2)

for f in *.md; do wc -w "$f"; done   # nombre de mots

Un bloc sans étiquette de langage reste sans couleur. PeepMD ne devine pas le langage :

le texte brut reste brut

Diagrammes Mermaid

Étiquetez le bloc mermaid au lieu d’un langage et il s’affiche sous forme de diagramme, dessiné par un moteur intégré, sans aucun accès au réseau. Les cinq types ci-dessous apparaissent chacun avec le Markdown qui les a produits.

Organigramme

Des boîtes et des flèches. graph LR va de gauche à droite, graph TD de haut en bas.

```mermaid
graph LR
    A[Étiqueter un bloc] -->|mermaid| B{Rendu ?}
    B -->|oui| C[Diagramme]
```

graph LR
    A[Étiqueter un bloc] -->|mermaid| B{Rendu ?}
    B -->|oui| C[Diagramme]

Séquence

Qui a dit quoi à qui, dans l’ordre.

```mermaid
sequenceDiagram
    participant Y as Vous
    participant P as PeepMD
    Y->>P: un bloc mermaid
    P-->>Y: un diagramme rendu
```

sequenceDiagram
    participant Y as Vous
    participant P as PeepMD
    Y->>P: un bloc mermaid
    P-->>Y: un diagramme rendu

Classes

Des types et leurs relations, pour documenter une conception.

```mermaid
classDiagram
    class Document {
        +String text
        +render()
    }
    class Style {
        +String name
    }
    Document --> Style : rendu avec
```

classDiagram
    class Document {
        +String text
        +render()
    }
    class Style {
        +String name
    }
    Document --> Style : rendu avec

États

Ce que fait une chose et ce qui la fait passer d’un état à l’autre.

```mermaid
stateDiagram-v2
    [*] --> Surveillance : document ouvert
    Surveillance --> Rendu : fichier modifié
    Rendu --> Surveillance : aperçu mis à jour
```

stateDiagram-v2
    [*] --> Surveillance : document ouvert
    Surveillance --> Rendu : fichier modifié
    Rendu --> Surveillance : aperçu mis à jour

Camembert

Des proportions, avec les nombres écrits tels quels.

```mermaid
pie title Les styles livrés
    "Intégrés" : 12
    "Les vôtres" : 3
```

pie title Les styles livrés
    "Intégrés" : 12
    "Les vôtres" : 3

Le reste de la famille Mermaid (diagrammes de Gantt, diagrammes entité-relation, parcours utilisateur et autres) fonctionne de la même façon : étiquetez le bloc mermaid et écrivez le diagramme. La syntaxe complète est documentée sur mermaid.js.org.

---

Précédent : Syntaxe Markdown · Sommaire · Suivant : Mathématiques