Code und Diagramme

Syntaxfarben

Umschließe einen Codeblock mit drei Backticks und gib eine Sprache an:

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

wird mit Syntaxfarben dargestellt, in über 35 Sprachen dank highlight.js, offline und passend zum hellen und dunklen Modus:

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

Dasselbe funktioniert für python, ruby, bash, json und viele mehr:

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   # Wortzahlen

Ein Block ohne Sprachangabe bleibt ungefärbt. PeepMD rät die Sprache nicht:

einfacher Text bleibt einfach

Mermaid-Diagramme

Gib dem Block mermaid statt einer Sprache, und er wird als Diagramm dargestellt, gezeichnet von einer mitgelieferten Engine ganz ohne Netzwerk. Die fünf Arten unten erscheinen jeweils mit dem Markdown, aus dem sie entstanden sind.

Flussdiagramm

Kästen und Pfeile. graph LR verläuft von links nach rechts, graph TD von oben nach unten.

```mermaid
graph LR
    A[Block markieren] -->|mermaid| B{Dargestellt?}
    B -->|ja| C[Diagramm]
```

graph LR
    A[Block markieren] -->|mermaid| B{Dargestellt?}
    B -->|ja| C[Diagramm]

Sequenz

Wer wem was gesagt hat, der Reihe nach.

```mermaid
sequenceDiagram
    participant Y as Du
    participant P as PeepMD
    Y->>P: ein Mermaid-Block
    P-->>Y: ein fertiges Diagramm
```

sequenceDiagram
    participant Y as Du
    participant P as PeepMD
    Y->>P: ein Mermaid-Block
    P-->>Y: ein fertiges Diagramm

Klassen

Typen und ihre Beziehungen, um einen Entwurf zu dokumentieren.

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

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

Zustände

Was ein Ding tut und was es von einem Zustand in den nächsten bringt.

```mermaid
stateDiagram-v2
    [*] --> Beobachten : Dokument geöffnet
    Beobachten --> Darstellen : Datei geändert
    Darstellen --> Beobachten : Vorschau aktualisiert
```

stateDiagram-v2
    [*] --> Beobachten : Dokument geöffnet
    Beobachten --> Darstellen : Datei geändert
    Darstellen --> Beobachten : Vorschau aktualisiert

Kreisdiagramm

Anteile, mit den Zahlen einfach hingeschrieben.

```mermaid
pie title Mitgelieferte Stile
    "Integriert" : 12
    "Eigene" : 3
```

pie title Mitgelieferte Stile
    "Integriert" : 12
    "Eigene" : 3

Der Rest der Mermaid-Familie (Gantt-Diagramme, Entity-Relationship-Diagramme, User Journeys und mehr) funktioniert genauso: Gib dem Block mermaid und schreib das Diagramm. Die vollständige Syntax ist auf mermaid.js.org dokumentiert.

---

Zurück: Markdown-Syntax · Inhalt · Weiter: Mathematik