Markdown-Vorschau

Markdown links tippen oder einfügen, das gerenderte Ergebnis erscheint rechts schon während des Schreibens. Passt alles, klicken Sie auf HTML kopieren, um den erzeugten Code in die Zwischenablage zu legen, oder auf HTML herunterladen, um ihn als markdown-output.html zu speichern. Das Rendering übernimmt pulldown-cmark, ein CommonMark-Parser in Rust, und das HTML wird vom Sanitizer ammonia bereinigt, beide kompiliert zu WebAssembly. Ihre Entwürfe werden im Browser-Tab gerendert und nie an einen Server geschickt.

Unterstützte Markdown-Syntax

Der Renderer folgt CommonMark, der standardisierten Markdown-Spezifikation, mit drei aktivierten Erweiterungen aus GitHub Flavored Markdown:

• Überschriften: # bis ######, oder unterstrichen mit === und ---.
• Hervorhebung: *kursiv*, **fett** und ~~durchgestrichen~~ (Erweiterung).
• Listen: Aufzählungen mit -, * oder +, nummerierte und verschachtelte Listen sowie Aufgabenlisten mit - [ ] und - [x] (Erweiterung).
• Tabellen: Pipe-Tabellen mit Trennzeile wie |---|---| (Erweiterung).
• Code: Inline-Backticks, umzäunte Blöcke mit drei Backticks oder Tilden, eingerückte Codeblöcke.
• Links und Bilder: [Text](https://...), Referenzlinks und Autolinks in spitzen Klammern.
• Zitate mit > und Trennlinien mit ---.
• Rohes HTML im Markdown ist erlaubt und wird anschließend bereinigt (siehe unten).

Fußnoten, Mathe-Formeln, Mermaid-Diagramme und Überschriften-Anker gehören nicht zum Umfang dieses Renderers.

Vorschau und Export Schritt für Schritt

1. Schreiben oder fügen Sie Markdown in den Editor ein. Die Vorschau aktualisiert sich einen Sekundenbruchteil nach dem letzten Tastendruck, so bleibt auch ein langes Dokument flüssig.
2. Prüfen Sie Überschriften, verschachtelte Listen, Tabellen und Codeblöcke in der Vorschau. Hier fallen Einrückungsfehler sofort auf.
3. Klicken Sie auf HTML kopieren, um das HTML in ein CMS, ein Newsletter-Tool oder eine Vorlage einzufügen.
4. Oder klicken Sie auf HTML herunterladen. Die Datei enthält nur das HTML-Fragment (kein <head>, keine Styles), bereit zum Einbetten in eine Seite.

Was der Sanitizer entfernt, und warum

Markdown erlaubt rohes HTML, ein eingefügtes Dokument könnte also ein Skript enthalten. Bevor etwas angezeigt oder exportiert wird, durchläuft das HTML einen Sanitizer:

• Entfernt: <script>- und <style>-Elemente, style- und class-Attribute, Event-Handler wie onclick oder onerror sowie HTML-Kommentare.
• Erlaubte Link-Schemata: http, https und mailto. Ein javascript:-Link wird entschärft.
• Relative URLs werden entfernt. Ein Link auf /docs/einrichtung oder ein Bild unter bilder/logo.png behält seinen Text, verliert aber das Ziel. Nutzen Sie absolute URLs, wenn Links und Bilder im exportierten HTML funktionieren sollen.
• Sprachklassen wie language-js werden von Codeblöcken entfernt; Syntax-Highlighting ergänzen Sie im Zielsystem.
• Checkboxen aus Aufgabenlisten werden entfernt, der Text des Eintrags bleibt.
• Jeder Link erhält rel="noopener noreferrer".

Das Ergebnis ist HTML, das Sie ohne XSS-Risiko in eine Seite einfügen können, selbst wenn das Markdown von Dritten stammt.

Typische Einsätze

• Ein README, ein Changelog oder eine Pull-Request-Beschreibung vor dem Push prüfen.
• Einen Blogartikel oder Newsletter in Markdown schreiben und das HTML in ein CMS oder E-Mail-Tool einfügen, das nur HTML annimmt.
• Markdown-Dokumentation in HTML-Fragmente für ein Hilfe-Center verwandeln.
• Herausfinden, warum eine Liste oder Tabelle anderswo falsch dargestellt wird, durch Vergleich mit einer CommonMark-Referenzdarstellung.

Im Vergleich zu Editoren und Static-Site-Tools

VS Code, Obsidian und Typora zeigen Markdown gut an, GitHub ebenfalls im Web-Editor. Pandoc oder ein Static-Site-Generator machen aus Markdown komplette HTML-Seiten. Dieses Tool deckt den Fall dazwischen ab: keine Installation, eine Vorschau nach CommonMark-Standard und sofort kopierbares HTML. Renderer unterscheiden sich bei Erweiterungen: Ein Dokument mit Fußnoten oder Diagrammen sieht hier anders aus als auf einer Plattform, die diese unterstützt.

Datenschutz für Entwürfe

Markdown-Entwürfe sind oft unveröffentlichte Arbeit: interne Dokumentation, Produktankündigungen unter Sperrfrist, Besprechungsnotizen, persönliche Aufzeichnungen. Online-Editoren, die serverseitig rendern, erhalten all das. Hier finden Rendering und Bereinigung per WebAssembly in der Seite statt, und der Text, den Sie tippen, verlässt Ihr Gerät nicht.

Häufige Fragen

Wird mein Markdown an einen Server gesendet?

Nein. Das Rendering läuft per WebAssembly in Ihrem Browser. Nichts wird hochgeladen oder gespeichert.

Wird GitHub Flavored Markdown unterstützt?

Die GFM-Tabellen, das Durchstreichen und die Aufgabenlisten werden zusätzlich zu CommonMark unterstützt. Andere GitHub-Funktionen wie Fußnoten, Erwähnungen oder Emoji-Kürzel werden nicht gerendert.

Warum ist mein relativer Link im HTML verschwunden?

Der Sanitizer behält nur absolute URLs mit http, https oder mailto. Relative Pfade werden aus Sicherheitsgründen entfernt. Schreiben Sie vollständige URLs, wenn die Links im Export funktionieren sollen.

Kann ich HTML in meinem Markdown verwenden?

Ja. Rohes HTML wird gerendert, nachdem Skripte, Styles, Event-Handler und unsichere Attribute entfernt wurden.

Wird mein Text zwischen Besuchen gespeichert?

Nein. Der Editorinhalt wird nicht gespeichert. Kopieren oder laden Sie Ihre Arbeit herunter, bevor Sie den Tab schließen.

Kann ich HTML zurück in Markdown wandeln?

Ja, mit dem Tool HTML zu Markdown. Eine eigene Seite für die Richtung Markdown nach HTML ist der Markdown-zu-HTML-Konverter.

Verwandtes Tool: Zählen Sie Wörter und Lesezeit Ihres Entwurfs mit dem Wortzähler.