Codice e diagrammi

Colorazione della sintassi

Racchiudi un blocco di codice tra tre apici inversi e indica un linguaggio:

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

viene reso con i colori della sintassi, in oltre 35 linguaggi grazie a highlight.js, offline, seguendo la modalità chiara e quella scura:

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

Lo stesso vale per python, ruby, bash, json e compagnia:

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   # conteggio delle parole

Un blocco senza linguaggio resta senza colori. PeepMD non indovina il linguaggio:

il testo semplice resta semplice

Diagrammi Mermaid

Indica mermaid al posto di un linguaggio e il blocco viene reso come diagramma, disegnato da un motore incluso nell’app, senza rete. I cinque tipi qui sotto compaiono ciascuno con il Markdown che li ha prodotti.

Diagramma di flusso

Riquadri e frecce. graph LR va da sinistra a destra, graph TD dall’alto in basso.

```mermaid
graph LR
    A[Indica un linguaggio] -->|mermaid| B{Viene reso?}
    B -->|sì| C[Diagramma]
```

graph LR
    A[Indica un linguaggio] -->|mermaid| B{Viene reso?}
    B -->|sì| C[Diagramma]

Sequenza

Chi ha detto cosa a chi, in ordine.

```mermaid
sequenceDiagram
    participant Y as Tu
    participant P as PeepMD
    Y->>P: un blocco mermaid
    P-->>Y: un diagramma reso
```

sequenceDiagram
    participant Y as Tu
    participant P as PeepMD
    Y->>P: un blocco mermaid
    P-->>Y: un diagramma reso

Classi

I tipi e le loro relazioni, per documentare un progetto.

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

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

Stati

Che cosa fa una cosa e che cosa la porta da uno stato all’altro.

```mermaid
stateDiagram-v2
    [*] --> Osservazione : documento aperto
    Osservazione --> Rendering : file modificato
    Rendering --> Osservazione : anteprima aggiornata
```

stateDiagram-v2
    [*] --> Osservazione : documento aperto
    Osservazione --> Rendering : file modificato
    Rendering --> Osservazione : anteprima aggiornata

Torta

Proporzioni, con i numeri scritti in chiaro.

```mermaid
pie title Stili inclusi
    "Integrati" : 12
    "I tuoi" : 3
```

pie title Stili inclusi
    "Integrati" : 12
    "I tuoi" : 3

Il resto della famiglia Mermaid (diagrammi di Gantt, relazioni tra entità, percorsi utente e altro) funziona allo stesso modo: indica mermaid nel blocco e scrivi il diagramma. La sintassi completa è documentata su mermaid.js.org.

---

Precedente: Sintassi Markdown · Indice · Successivo: Matematica