MDViewer

Markdown-Syntaxbeispiele

2026-07-27 2181 Wörter 11 Min. Lesezeit

Eine Seite mit der gesamten Markdown-Syntax und allen von MDViewer unterstützten Darstellungsfunktionen: Formeln, Tabellen, Diagramme, Syntaxhervorhebung, Hinweise, Fußnoten und mehr.

SyntaxBeispieleMermaidKaTeX

Diese Seite demonstriert alles, was MDViewer rendern kann. Verwende sie als Rendering-Checkliste – jeder folgende Block sollte formatiert erscheinen und nicht als rohes Markup.

Tipp

Lade diese Datei herunter und öffne sie mit dem Reader auf der Startseite. Du erhältst genau dasselbe Ergebnis.

1. Text und Inline-Formatierung

Ein gewöhnlicher Absatz. Fett, kursiv, fett kursiv, durchgestrichen, unterstrichene Einfügung, hervorgehoben, Inline-Code.

Tief- und Hochstellung: H2O, E = mc2, der 42ste Eintrag.

Ein Inline-Link zur CommonMark-Spezifikation , ein automatischer Link https://developer.mozilla.org/ und ein interner Link .

Abkürzungen zeigen beim Überfahren ihre Langform: HTML und CSS sind die Grundlagen des Frontends.

*[HTML]: HyperText Markup Language *[CSS]: Cascading Style Sheets

Emoji: 🚀 ✨ 📚 ✅ ⚠️

Erzwinge einen Zeilenumbruch mit zwei Leerzeichen am Ende:
diese Zeile gehört zum selben Absatz wie die vorherige.

Markdown anzeigen Markdown ausblenden 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

Ein gewöhnlicher Absatz. **Fett**, *kursiv*, ***fett kursiv***, ~~durchgestrichen~~, ++unterstrichene Einfügung++, ==hervorgehoben==, `Inline-Code`.

Tief- und Hochstellung: H~2~O, E = mc^2^, der 42^ste^ Eintrag.

Ein Inline-Link zur [CommonMark-Spezifikation](https://commonmark.org/), ein automatischer Link <https://developer.mozilla.org/> und ein [interner Link](../quick-start/).

Abkürzungen zeigen beim Überfahren ihre Langform: HTML und CSS sind die Grundlagen des Frontends.

*[HTML]: HyperText Markup Language
*[CSS]: Cascading Style Sheets

Emoji: :rocket: :sparkles: :books: :white_check_mark: :warning:

Erzwinge einen Zeilenumbruch mit zwei Leerzeichen am Ende:  
diese Zeile gehört zum selben Absatz wie die vorherige.

2. Überschriftsebenen

Überschriften erhalten automatisch Anker, die Gliederung rechts springt zu ihnen und beim Überfahren erscheint am Ende ein #-Link.

Überschrift Ebene 3

Überschrift Ebene 4

Überschrift Ebene 5
Überschrift Ebene 6

3. Listen

Aufzählung

  • Erster Eintrag
  • Zweiter Eintrag
    • Verschachtelte Ebene zwei
      • Verschachtelte Ebene drei
  • Dritter Eintrag
Markdown anzeigen Markdown ausblenden 
1
2
3
4
5

- Erster Eintrag
- Zweiter Eintrag
  - Verschachtelte Ebene zwei
    - Verschachtelte Ebene drei
- Dritter Eintrag

Nummerierte Liste

  1. Inhalt vorbereiten
  2. In Markdown schreiben
    1. Text entwerfen
    2. Vorschau laufend prüfen
  3. Veröffentlichen
Markdown anzeigen Markdown ausblenden 
1
2
3
4
5

1. Inhalt vorbereiten
2. In Markdown schreiben
   1. Text entwerfen
   2. Vorschau laufend prüfen
3. Veröffentlichen

Aufgabenliste

  • GFM-Aufgabenlisten werden unterstützt
  • Erledigte Einträge werden durchgestrichen
  • Ein unerledigter Eintrag
  • Verschachtelung wird unterstützt
    • Untereinträge können ebenfalls abgehakt werden
    • Ein unerledigter Untereintrag
Markdown anzeigen Markdown ausblenden 
1
2
3
4
5
6

- [x] GFM-Aufgabenlisten werden unterstützt
- [x] Erledigte Einträge werden durchgestrichen
- [ ] Ein unerledigter Eintrag
- [ ] Verschachtelung wird unterstützt
  - [x] Untereinträge können ebenfalls abgehakt werden
  - [ ] Ein unerledigter Untereintrag

Definitionsliste

Mermaid
Eine textbasierte Diagrammsyntax, die als Flussdiagramm, Sequenzdiagramm und mehr gerendert wird.
Markdown
Eine leichtgewichtige Auszeichnungssprache, die Layoutstrukturen als einfachen Text ausdrückt.
KaTeX
Eine Bibliothek, die TeX-Formeln sehr schnell im Browser setzt.
Markdown anzeigen Markdown ausblenden 
1
2
3
4
5
6
7
8

Mermaid
: Eine textbasierte Diagrammsyntax, die als Flussdiagramm, Sequenzdiagramm und mehr gerendert wird.

Markdown
: Eine leichtgewichtige Auszeichnungssprache, die Layoutstrukturen als einfachen Text ausdrückt.

KaTeX
: Eine Bibliothek, die TeX-Formeln sehr schnell im Browser setzt.

4. Zitate und Hinweisblöcke

Ein gewöhnliches Blockzitat. Zitate können Inline-Formatierung, Code und mehrere Absätze enthalten.

Dies ist der zweite Absatz des Zitats.

Ein verschachteltes Zitat.

Markdown anzeigen Markdown ausblenden 
1
2
3
4
5

> Ein gewöhnliches Blockzitat. Zitate können **Inline-Formatierung**, `Code` und mehrere Absätze enthalten.
>
> Dies ist der zweite Absatz des Zitats.
>
> > Ein verschachteltes Zitat.

Hinweisblöcke im GitHub-Stil erscheinen als farbige Karten mit Symbolen:

Hinweis

Allgemeine Informationen, die Kontext ergänzen, ohne den Hauptablauf zu beeinflussen.

Tipp

Ein hilfreicher Tipp. Zum Beispiel: Drücke ?, um alle Tastenkürzel zu sehen.

Wichtig

Wesentliche Informationen zum Abschluss der Aufgabe; wer sie überspringt, scheitert.

Warnung

Etwas, das jetzt deine Aufmerksamkeit erfordert; Ignorieren kann Folgen haben.

Vorsicht

Eine riskante Operation – stelle vor der Ausführung sicher, dass du das Ergebnis verstehst.

Markdown anzeigen Markdown ausblenden 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

> [!NOTE]
> Allgemeine Informationen, die Kontext ergänzen, ohne den Hauptablauf zu beeinflussen.

> [!TIP]
> Ein hilfreicher Tipp. Zum Beispiel: Drücke <kbd>?</kbd>, um alle Tastenkürzel zu sehen.

> [!IMPORTANT]
> Wesentliche Informationen zum Abschluss der Aufgabe; wer sie überspringt, scheitert.

> [!WARNING]
> Etwas, das jetzt deine Aufmerksamkeit erfordert; Ignorieren kann Folgen haben.

> [!CAUTION]
> Eine riskante Operation – stelle vor der Ausführung sicher, dass du das Ergebnis verstehst.

5. Code

Inline- und umschlossener Code

Der Installationsbefehl lautet npm install; die Konfigurationsdatei heißt package.json.

1
2
3
4
5

# Alle Markdown-Dateien im Ordner finden
find . -name "*.md" -not -path "./node_modules/*"

# Gesamtzahl der Wörter ermitteln
wc -w $(find . -name "*.md") | tail -1

Hervorhebung verschiedener Sprachen 

1
2
3
4
5
6
7
8

import MarkdownIt from 'markdown-it';

const md = new MarkdownIt({ html: true, linkify: true });

export function render(source) {
  const { data, content } = parseFrontMatter(source);
  return { meta: data, html: md.render(content) };
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

from dataclasses import dataclass


@dataclass
class Document:
    path: str
    words: int

    @property
    def minutes(self) -> int:
        """Lesezeit bei 450 chinesischen Zeichen pro Minute schätzen."""
        return max(1, round(self.words / 450))


docs = [Document("readme.md", 1280), Document("guide.md", 3400)]
print(sum(d.minutes for d in docs), "Minuten")
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

package main

import (
	"fmt"
	"strings"
)

func Slugify(title string) string {
	return strings.ToLower(strings.ReplaceAll(title, " ", "-"))
}

func main() {
	fmt.Println(Slugify("Hallo Markdown Welt"))
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

#[derive(Debug, Clone)]
pub struct Heading {
    pub level: u8,
    pub text: String,
}

impl Heading {
    pub fn anchor(&self) -> String {
        self.text.to_lowercase().replace(' ', "-")
    }
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10

SELECT d.path,
       COUNT(h.id) AS heading_count,
       SUM(d.words) AS total_words
FROM documents AS d
LEFT JOIN headings AS h ON h.doc_id = d.id
WHERE d.updated_at >= '2026-01-01'
GROUP BY d.path
HAVING COUNT(h.id) > 3
ORDER BY total_words DESC
LIMIT 20;
1
2
3
4
5
6
7
8

markup:
  goldmark:
    extensions:
      passthrough:
        enable: true
        delimiters:
          block: [["\\[", "\\]"], ["$$", "$$"]]
          inline: [["\\(", "\\)"], ["$", "$"]]
1
2
3
4
5

  function render(source) {
-   return marked(source);
+   const { data, content } = parseFrontMatter(source);
+   return md.render(content);
  }

Oben rechts in einem Codeblock befinden sich Schaltflächen für Kopieren, Zeilennummern und weichen Umbruch; Blöcke mit mehr als 24 Zeilen werden automatisch eingeklappt.

6. Tabellen

Ausrichtungssyntax wird unterstützt, Spaltenköpfe sortieren per Klick und breite Tabellen lassen sich horizontal scrollen.

Funktion Engine Größe Laden
Markdown-Parsing markdown-it 505 KB Beim ersten Zeichnen
Syntaxhervorhebung highlight.js Im Hauptbundle Beim ersten Zeichnen
Mathematische Formeln KaTeX 261 KB Bei Bedarf
Diagramme Mermaid 3,3 MB Bei Bedarf
Volltextsuche Fuse.js Im Hauptbundle Beim ersten Zeichnen
Markdown anzeigen Markdown ausblenden 
1
2
3
4
5
6
7

| Funktion | Engine | Größe | Laden |
|:---------|:------:|------:|:------|
| Markdown-Parsing | markdown-it | 505 KB | Beim ersten Zeichnen |
| Syntaxhervorhebung | highlight.js | Im Hauptbundle | Beim ersten Zeichnen |
| Mathematische Formeln | KaTeX | 261 KB | Bei Bedarf |
| Diagramme | Mermaid | 3,3 MB | Bei Bedarf |
| Volltextsuche | Fuse.js | Im Hauptbundle | Beim ersten Zeichnen |

Links-, Mittel- und Rechtsausrichtung entstehen jeweils durch :---, :---: und ---:.

Eine Tabelle mit formatierten Inhalten

Syntax Schreibweise Ergebnis
Fett **Text** Text
Code `Code` Code
Formel $a^2+b^2$ $a^2+b^2$
Link [Name](URL) Name
Markdown anzeigen Markdown ausblenden 
1
2
3
4
5
6

| Syntax | Schreibweise | Ergebnis |
|--------|-------------|----------|
| Fett | `**Text**` | **Text** |
| Code | `` `Code` `` | `Code` |
| Formel | `$a^2+b^2$` | $a^2+b^2$ |
| Link | `[Name](URL)` | [Name](https://example.com) |

7. Mathematik

Formeln im Text

Die Masse-Energie-Äquivalenz $E = mc^2$ und die eulersche Identität $e^{i\pi} + 1 = 0$ können beide in einem Satz stehen. Für $n \to \infty$ gilt $\sum_{k=1}^{n} \frac{1}{k^2} \to \frac{\pi^2}{6}$.

Markdown anzeigen Markdown ausblenden 
1

Die Masse-Energie-Äquivalenz $E = mc^2$ und die eulersche Identität $e^{i\pi} + 1 = 0$ können beide in einem Satz stehen. Für $n \to \infty$ gilt $\sum_{k=1}^{n} \frac{1}{k^2} \to \frac{\pi^2}{6}$.

Abgesetzte Formeln

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

Matrizen

$$ A = \begin{pmatrix} a_{11} & a_{12} & \cdots & a_{1n} \\ a_{21} & a_{22} & \cdots & a_{2n} \\ \vdots & \vdots & \ddots & \vdots \\ a_{m1} & a_{m2} & \cdots & a_{mn} \end{pmatrix} $$

Mehrzeilige Ausrichtung

$$ \begin{aligned} \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\ \nabla \cdot \mathbf{B} &= 0 \\ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\ \nabla \times \mathbf{B} &= \mu_0 \mathbf{J} + \mu_0 \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \end{aligned} $$

Abschnittsweise Funktionen und Integrale

$$ f(x) = \begin{cases} x^2 & \text{if } x \geq 0 \\ -x^2 & \text{if } x < 0 \end{cases} \qquad \hat{f}(\xi) = \int_{-\infty}^{\infty} f(x)\, e^{-2\pi i x \xi}\, dx $$

8. Diagramme (Mermaid)

Diagramme passen ihre Farben automatisch an das helle oder dunkle Farbschema an; zum Kopieren des Quelltexts oder Herunterladen des SVG oben rechts darüberfahren.

Flussdiagramm

Sequenzdiagramm

Klassendiagramm

Zustandsdiagramm

Entity-Relationship-Diagramm

Gantt-Diagramm

Kreisdiagramm

User Journey

Mindmap

Git-Graph

9. Einklappbare Abschnitte

Zum Aufklappen klicken: Warum wird die Diagramm-Engine nur bei Bedarf geladen?

Gebündelt ist Mermaid etwa 3,3 MB groß – die größte Abhängigkeit des gesamten Projekts. Im Hauptbundle müsste jeder Reader sie herunterladen, selbst wenn ein Dokument kein einziges Diagramm enthält.

MDViewer teilt Mermaid und KaTeX deshalb in separate ES-Module und lädt sie per dynamischem import() erst dann, wenn tatsächlich ein mermaid-Codeblock oder eine Formel auf der Seite erscheint. Bei einem reinen Textdokument benötigt das erste Zeichnen etwa 505 KB.

Zum Aufklappen klicken: Welche Front-Matter-Formate werden unterstützt?

Alle drei. Der Reader erkennt sie und zeigt sie in einer einklappbaren Karte unter dem Dokumenttitel:

  • YAML: von --- umschlossen, am häufigsten verwendet
  • TOML: von +++ umschlossen
  • JSON: von { } umschlossen

Felder wie title, description, date, author und tags werden in den Dokumentkopf übernommen und separat angezeigt.

Markdown anzeigen Markdown ausblenden 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<details>
<summary>Zum Aufklappen klicken: Warum wird die Diagramm-Engine nur bei Bedarf geladen?</summary>

Gebündelt ist Mermaid etwa 3,3 MB groß – die größte Abhängigkeit des gesamten Projekts. Im Hauptbundle müsste jeder Reader sie herunterladen, selbst wenn ein Dokument kein einziges Diagramm enthält.

MDViewer teilt Mermaid und KaTeX deshalb in separate ES-Module und lädt sie per dynamischem `import()` erst dann, wenn tatsächlich ein `mermaid`-Codeblock oder eine Formel auf der Seite erscheint. Bei einem reinen Textdokument benötigt das erste Zeichnen etwa 505 KB.

</details>

<details>
<summary>Zum Aufklappen klicken: Welche Front-Matter-Formate werden unterstützt?</summary>

Alle drei. Der Reader erkennt sie und zeigt sie in einer einklappbaren Karte unter dem Dokumenttitel:

- **YAML**: von `---` umschlossen, am häufigsten verwendet
- **TOML**: von `+++` umschlossen
- **JSON**: von `{ }` umschlossen

Felder wie `title`, `description`, `date`, `author` und `tags` werden in den Dokumentkopf übernommen und separat angezeigt.

</details>

10. Fußnoten

Markdown wurde 20041 entwickelt, um formatierten Text in einfachen Dateien zu schreiben. Die meisten Werkzeuge folgen heute der CommonMark-Spezifikation2 und ergänzen sie um GitHub-Erweiterungen3.

  1. Von John Gruber zusammen mit Aaron Swartz entworfen, mit dem Ziel, dass Text schon vor dem Rendering natürlich lesbar ist. ↩︎

  2. Eine 2014 veröffentlichte präzise Spezifikation, die einen Großteil der Mehrdeutigkeit der ursprünglichen Beschreibung beseitigte. ↩︎

  3. Ergänzt Tabellen, Aufgabenlisten, Durchstreichen und automatische Links – die Syntax, die heute die meisten erwarten. ↩︎

Markdown anzeigen Markdown ausblenden 
1
2
3
4
5

Markdown wurde 2004[^origin] entwickelt, um formatierten Text in einfachen Dateien zu schreiben. Die meisten Werkzeuge folgen heute der CommonMark-Spezifikation[^spec] und ergänzen sie um GitHub-Erweiterungen[^gfm].

[^origin]: Von John Gruber zusammen mit Aaron Swartz entworfen, mit dem Ziel, dass Text schon vor dem Rendering natürlich lesbar ist.
[^spec]: Eine 2014 veröffentlichte präzise Spezifikation, die einen Großteil der Mehrdeutigkeit der ursprünglichen Beschreibung beseitigte.
[^gfm]: Ergänzt Tabellen, Aufgabenlisten, Durchstreichen und automatische Links – die Syntax, die heute die meisten erwarten.

11. Bilder

Bilder lassen sich zum Vergrößern anklicken, mit dem Mausrad zoomen und durch Ziehen verschieben. Ein Bild mit Titel erhält eine zentrierte Beschriftung.

Die dreispaltige Leseansicht von MDViewer
Drei Spalten: Dateibaum links, Inhalt in der Mitte, Gliederung rechts

12. Rohes HTML

HTML kann direkt in Markdown geschrieben und unverändert gerendert werden:

Badge-Komponente Als rohes HTML geschrieben Ctrl + K
Markdown anzeigen Markdown ausblenden 
1
2
3
4
5
6

<div style="display:flex;gap:.75rem;flex-wrap:wrap;align-items:center">
  <span class="badge">Badge-Komponente</span>
  <span class="badge">Als rohes HTML geschrieben</span>
  <kbd>Ctrl</kbd> + <kbd>K</kbd>
  <progress value="72" max="100" style="width:8rem"></progress>
</div>

13. Escape-Zeichen und Sonderzeichen

Escape mit Rückstrich: *nicht kursiv*, `kein Code`, # keine Überschrift.

HTML-Entitäten: © — … → ≤ ≠

Satzzeichen und gemischte Schriften: „Anführungszeichen“, »Buchtitel«, Gedankenstriche — und Auslassungspunkte…

Markdown anzeigen Markdown ausblenden 
1
2
3
4
5

Escape mit Rückstrich: \*nicht kursiv\*, \`kein Code\`, \# keine Überschrift.

HTML-Entitäten: &copy; &mdash; &hellip; &rarr; &le; &ne;

Satzzeichen und gemischte Schriften: „Anführungszeichen“, »Buchtitel«, Gedankenstriche — und Auslassungspunkte…

Rendering-Checkliste

Wenn jeder folgende Punkt deiner Darstellung entspricht, funktioniert die gesamte Rendering-Pipeline:

  • Überschriften haben Anker; die Gliederung springt zu ihnen und hebt die aktuelle Position hervor
  • Codeblöcke haben Farben, Sprachbezeichnung und Kopierschaltfläche
  • Tabellen haben Ränder und Zeilenhervorhebung; Spaltenköpfe sortieren per Klick
  • Formeln im Text und als Block erscheinen mathematisch gesetzt und nicht als rohes LaTeX
  • Alle zehn Mermaid-Diagramme erscheinen als Vektorgrafik
  • Hinweisblöcke erscheinen als farbige Karten mit Symbolen
  • Fußnoten sind in beide Richtungen verlinkt
  • Bilder werden beim Anklicken vergrößert
  • Der Dunkelmodus passt die Diagrammfarben an
Notwendiger lokaler Speicher

Speichert Einstellungen, Entwürfe, zuletzt verwendete Elemente und deine Einwilligung in diesem Browser, damit angeforderte Funktionen verfügbar sind.

Immer aktiv