Markdown-Vorschau

Live GitHub Flavored Markdown mit KaTeX-Mathematik, Mermaid-Diagrammen und Syntax-Highlighting — vollständig im Browser.

Editor
Vorschau
0 words 0 chars 0 min read

Was ist die Markdown-Vorschau?

Eine kostenlose, browserbasierte Live-Vorschau für GitHub Flavored Markdown — mit syntax-highlightem Code (highlight.js), KaTeX-gerenderter Mathematik, Mermaid-Diagrammen, bereinigter HTML-Ausgabe und Ein-Klick-Export als .html oder .md. Nichts wird hochgeladen; jeder Tastendruck wird im Browser mit markdown-it und DOMPurify gerendert.

Wie kann ich GitHub Flavored Markdown live online mit Mathematik, Diagrammen und Syntax-Highlighting in der Vorschau anzeigen?

Tippen oder fügen Sie Markdown links ein und sehen Sie das gerenderte HTML sofort rechts. Die Vorschau unterstützt Tabellen, Codeblöcke mit highlight.js, KaTeX-Mathematik ($E = mc^2$ inline oder als Block), Mermaid-Diagramme (graph, sequenceDiagram usw.), Aufgabenlisten, Zitate und mehr. Die Ausgabe wird von DOMPurify bereinigt — sicher zum Kopieren in E-Mails, Blogs oder statische Sites. Das Werkzeug läuft komplett im Browser — nichts wird hochgeladen.

Wichtige Funktionen

Live-GFM-Rendering
markdown-it mit linkify, typographer und Tabellen liefert sofortiges GitHub Flavored Markdown — Überschriften, Listen, Code, Tabellen, Zitate, Fußnoten; unsicheres Inline-HTML wird escaped.
highlight.js für Code
Fenced Codeblöcke erhalten Syntaxfarben von highlight.js für 190+ Sprachen — mit Auto-Erkennung, wenn keine Sprache angegeben ist.
KaTeX Mathematik inline + Block
Mathematik mit einfachen oder doppelten Dollarzeichen umschließen ($E = mc^2$ oder $\int_0^1 f(x) dx$). KaTeX rendert akkurates, schnelles LaTeX im Browser — keine MathJax-Round-Trips.
Mermaid-Diagramme (lazy geladen)
Verwenden Sie ```mermaid Fenced-Blöcke für Flowcharts, Sequenzdiagramme, Gantt-Charts und mehr. Das 3-MB-Mermaid-Bundle wird erst geladen, wenn Sie ein Diagramm tatsächlich verwenden.
Drei Ansichtsmodi
Wechseln Sie per Klick zwischen Split-, Editor-only- und Preview-only-Modus. Vollbildmodus blendet Ablenkungen für konzentriertes Schreiben aus.
Bereinigte Ausgabe + Export
Die Ausgabe läuft durch DOMPurify (mit SVG/MathML-Allowlist) vor der Einfügung — sicher zum Einbetten. Gerenderten HTML kopieren, Quell-Markdown kopieren oder beides als eigenständige Datei herunterladen.

So funktioniert es

Markdown in die linke Spalte tippen oder einfügen. Die Vorschau rechts aktualisiert sich live, debounced auf 80 ms. Über die Toolbar fett, kursiv, Überschriften, Links, Code, Zitate, Listen und Tabellen einfügen, oder "Beispiel" klicken, um ein Funktions-Showcase zu laden. Modi wechseln (Split / Editor / Vorschau), Vollbild umschalten, Ergebnis als HTML oder .md exportieren. Nichts wird hochgeladen — markdown-it, DOMPurify, highlight.js, KaTeX und Mermaid laufen alle im Browser.

Häufig gestellte Fragen

Wird mein Markdown auf einen Server hochgeladen?

Nein. Die gesamte Vorschau läuft im Browser mit markdown-it (Parser), DOMPurify (Sanitiser), highlight.js (Code-Farben), KaTeX (Mathematik) und Mermaid (Diagramme). Eingefügter Text verlässt Ihr Gerät nicht — sicher für private Entwürfe und unveröffentlichte Beiträge.

Welche Markdown-Variante wird unterstützt?

GitHub Flavored Markdown (CommonMark + Tabellen, Fenced Code, Autolinks, Strikethrough, Task-Listen) plus KaTeX-Mathematiksyntax und Mermaid-Diagramme in ```mermaid-Fenced-Blöcken. URLs werden automatisch verlinkt, typografische Ersetzungen (Em-Dashes, Smart Quotes) werden angewendet.

Ist das gerenderte HTML zum Einbetten sicher?

Ja. Die Ausgabe wird von DOMPurify mit einer Allowlist bereinigt, die KaTeX/Mermaid-SVG-Ausgabe erlaubt — Cross-Site-Scripting-Angriffe über präparierten Markdown werden blockiert. Roh-HTML in der Quelle wird escaped, nicht ausgeführt.

Wie groß sind die geladenen Bibliotheken?

markdown-it (~124 KB), DOMPurify (~27 KB), highlight.js (~127 KB) und KaTeX (~271 KB + 24 KB CSS) laden beim ersten Besuch. Mermaid (3,3 MB) wird nur bei Bedarf geladen, wenn ein Diagramm verwendet wird — die initiale Seite bleibt schnell.

Kann ich das gerenderte HTML exportieren?

Ja. "HTML kopieren" legt das gerenderte Markup in die Zwischenablage, "HTML laden" speichert ein eigenständiges Dokument, "Markdown kopieren" / ".md laden" bewahrt die Quelle.

Vom Tooljar-Team gebaut mit markdown-it (v14+), DOMPurify, highlight.js (v11+), KaTeX (v0.16+) und Mermaid (v11+) — alles in vanilla JavaScript verpackt, ohne Analytics auf der Editor-Eingabe; das Werkzeug funktioniert nach dem Caching offline und respektiert die Privatsphäre Ihrer Entwürfe.