Diagramme und Mathe

Mermaid (Diagramme) und KaTeX (Mathe) sind selbst gehostet und werden nur dann geladen, wenn der jeweilige Shortcode auf der Seite vorkommt - kein unnötiges JavaScript auf Seiten ohne Diagramme oder Formeln.

Mermaid-Diagramme #

Schreib das Diagramm in einen mermaid-Shortcode:

{{< mermaid >}}
graph LR
  A[Markdown] --> B{Render-Hook}
  B --> C[WebP]
  B --> D[Lightbox]
{{< /mermaid >}}

graph LR
  A[Markdown] --> B{Render-Hook}
  B --> C[WebP]
  B --> D[Lightbox]

Auch komplexere Diagramme funktionieren, etwa ein Sequenzdiagramm:

sequenceDiagram
  Besucher->>Server: GET /post/...
  Server-->>Besucher: HTML (vorgerendert)
  Besucher->>Besucher: Dark Mode anwenden (kein Flash)

Mermaid übernimmt automatisch das helle bzw. dunkle Farbschema.

KaTeX-Formeln #

Setz einmal den Marker-Shortcode {{< katex >}} auf die Seite - er lädt den KaTeX-Renderer. Die eigentliche Mathematik schreibst du mit $ ... $ (inline) bzw. $$ ... $$ (abgesetzt).

Inline: Die Eulersche Identität $e^{i\pi} + 1 = 0$ mitten im Satz.

Abgesetzt:

$$ \int_{-\infty}^{\infty} e^{-x^2},dx = \sqrt{\pi} $$

Und eine Summe:

$$ \sum_{k=1}^{n} k = \frac{n(n+1)}{2} $$