Was dieses Tool macht

Ein Markdown-Editor mit Live-HTML-Vorschau. Tippe CommonMark links, sieh das gerenderte Ergebnis rechts. Der Renderer unterstützt die Standard-Block- und Inline-Elemente plus GitHub-flavored Tabellen und Strikethrough. Das Output-HTML ist sanitized — Roh-HTML im Source wird escaped, und javascript:/data:-URLs werden vor dem Erreichen der Seite gedroppt.

Wann du es brauchst

Eine README entwerfen, bevor du sie nach GitHub pusht.
Eine Issue- oder PR-Beschreibung previewen, ohne den Browser zu verlassen.
Markdown von irgendwoher pasten und prüfen, dass es so rendert wie erwartet.
Sauberes HTML produzieren, das du in ein CMS kopieren kannst, das kein Markdown spricht.

Wie es funktioniert

Der Renderer ist hand-geschrieben, ~340 Zeilen, ohne Dritt-Markdown- oder Sanitizer-Dependency. Block-Parsing handhabt ATX-Überschriften, Absätze, fenced und indented Code, Listen (geordnet und ungeordnet), Blockquotes, horizontale Linien und GFM-Pipe-Tabellen. Inline-Parsing deckt Emphasis, Strong, Code-Spans, Strikethrough, Links, Bilder, Autolinks und Hard-Linebreaks ab.

Security ist auf zwei Ebenen erzwungen. Erstens läuft jeder Text-Run durch HTML-Entity-Escaping, bevor er in den Output-Buffer gelangt — ein literales <script> im Source wird zu <script>, nie zu einem ausführenden Tag. Zweitens läuft jede URL in einem Link oder Bild durch eine Allow-List (http(s), mailto, tel, Anker, relativer Pfad) — alles andere wird gedroppt. Das fängt javascript:, data:, vbscript:, gemischte Schreibweisen (JaVaScRiPt:) und Control-Char-Splicing (java\tscript:).

Mermaid-Diagramme

Mit mermaid getaggte fenced Code-Blöcke werden an die Mermaid-Bibliothek übergeben und live in der Vorschau zu SVG gerendert. Die Bibliothek wird dynamisch importiert, sobald das erste Diagramm erscheint — wer kein Diagramm schreibt, lädt sie nie. Mermaid läuft mit securityLevel: "strict" — kein Inline-JavaScript, kein <foreignObject>-HTML, keine externen Bild-Fetches.

Voll unterstützte Diagrammtypen: flowchart, sequence, class, state, ER, journey, gitGraph, timeline, mindmap, gantt, pie. Die architecture-beta- und Icon-Pack-Varianten rendern Geometrie und Layout, aber Icons werden gestrippt (Icon-Packs werden standardmäßig von CDNs geladen — inkompatibel mit der Privacy-Haltung dieses Tools, das beim Render oder Export keinen Network-Call macht).

PDF-Export

Der "PDF exportieren"-Button produziert ein echtes herunterladbares PDF — kein Druckdialog-Workaround — durch:

Klonen des Live-Vorschau-DOMs (mit bereits gerenderten Mermaid-SVGs).
Rasterisieren jedes <svg> zu einem flachen PNG-<img>.
Element-bewusste Paginierung — Spacer werden eingefügt, damit Absätze, Tabellen und Diagramme nicht durch Seitengrenzen geschnitten werden.
html2canvas-pro erfasst die Off-Screen-Bühne; pdf-lib baut das PDF.
Browser-Download wird ausgelöst.

Kein Upload, kein window.open, kein Druckdialog. Die ganze Pipeline ist Browser-only und wird beim ersten Export dynamisch importiert.

Hinweise

Warum kein Syntax-Highlighting in Code-Blöcken? Ein echter Highlighter (Prism, highlight.js, Shiki) sind 50–500 KB pro Page. Wir haben es weggelassen, um das Bundle klein zu halten. Der Sprach-Tag wird zu einem Klassennamen (language-js), du kannst Highlighting also auf das kopierte HTML draufsetzen, wenn du es brauchst.

Werden Bilder gerendert? Ja, aber nur mit sanitisierten URLs. Lokale Datei-Pfade (./image.png) sind erlaubt; data:-Image-URIs nicht.

Wie nah ist es an CommonMark? Nah auf den gängigen 90 %. Edge Cases — Link-Reference-Definitions, Setext-Überschriften, geschachtelte Listen mit Leerzeilen — können von der vollen Spec abweichen.

Markdown-Vorschau