Markdown zu HTML und zurück: ein Konverter mit Live-Vorschau
Fügen Sie Markdown ein und Sie sehen die fertige Seite und daneben sauberes HTML. Fügen Sie HTML ein und Sie erhalten Markdown, das sich für eine README oder einen Blogbeitrag eignet. Beide Richtungen laufen in Ihrem Browser: Der Text wird nirgendwohin gesendet und nirgends gespeichert.
.md hierher — die Datei wird lokal gelesen. Unterstützt wird CommonMark im üblichen Umfang plus die GFM-Erweiterungen: Tabellen, Durchstreichen, Aufgabenlisten.
Fügen Sie oben Markdown ein — das HTML erscheint hier.
.html hierher — die Datei wird lokal gelesen. Das Parsen läuft über DOMParser, daher funktioniert es mit einem Fragment ebenso wie mit einer ganzen Seite.
Fügen Sie oben HTML ein — das Markdown erscheint hier.
Der Text verlässt Ihren Browser nicht — die Umwandlung läuft lokal, ohne Versand an einen Server.
Was genau unterstützt wird
Auf der Markdown-Seite — CommonMark im üblichen Umfang plus die GFM-Erweiterungen: Überschriften mit Rauten und mit Unterstreichung, Absätze, horizontale Linien; Aufzählungen, nummerierte und verschachtelte Listen, in dichter wie lockerer Form; Aufgabenlisten in eckigen Klammern; Zitate, auch mit fauler Zeilenfortsetzung; eingezäunter Code mit Sprachnamen und eingerückter Code; GFM-Tabellen mit Spaltenausrichtung; Links, Bilder, Autolinks, Referenzlinks am Ende des Dokuments; fett, kursiv, durchgestrichen, Inline-Code, maskierte Zeichen, harter Umbruch. Auf der HTML-Seite läuft das Parsen über den DOMParser des Browsers selbst, daher funktionieren sowohl ein Fragment als auch eine ganze Seite mit head. Tabellen mit verbundenen Zellen lassen sich nicht nach Markdown übertragen — eine solche Syntax gibt es dort nicht, also bleiben sie Tags, und das Werkzeug sagt es. Was bewusst fehlt: Syntaxhervorhebung in Codeblöcken, Fußnoten, Formeln und die Direktiven bestimmter Static-Site-Generatoren. Das ist kein Markdown mehr, sondern der Dialekt eines einzelnen Werkzeugs.
Ein Zeilenumbruch: zwei verschiedene Markdowns
Die häufigste Quelle von Abweichungen zwischen Konvertern ist genau der einzelne Umbruch innerhalb eines Absatzes. Nach CommonMark ist er ein gewöhnliches Leerzeichen: Zwei Zeilen werden zu einem Absatz verklebt. So verhalten sich Pandoc, Dokumentationsgeneratoren und die meisten statischen Seiten. GitHub macht es in Kommentaren, Issue-Beschreibungen und Reviews umgekehrt: Jeder Umbruch wird zu einem br-Tag. Genau deshalb klumpt ein Text, der im Issue gut aussah, nach dem Umzug in eine README zu einem einzigen Absatz zusammen. Das Häkchen «Ein einzelner Zeilenumbruch ist ein br» schaltet zwischen diesen beiden Gewohnheiten um. Standardmäßig gilt die CommonMark-Regel.
Warum die Vorschau nicht alles zeigt, was im HTML steht
Markdown erlaubt laut Spezifikation HTML in sich selbst. Das ist praktisch und bedeutet zugleich, dass jeder eingefügte Text ausführbaren Code enthalten kann. Beliebte Online-Betrachter schreiben das Ergebnis unverändert in innerHTML. Die Bibliothek marked, auf der sie aufbauen, hat seit Version vier überhaupt keine eingebaute Bereinigung — ein script-Tag aus fremdem Markdown wird dort einfach ausgeführt. Hier wird die Vorschau aus DOM-Knoten nach einer Whitelist aufgebaut: script, iframe, object, Ereignishandler wie onclick und Links mit dem Schema javascript: gelangen nicht hinein, und die Liste des Herausgeschnittenen erscheint unter dem Ergebnis. Im Tab «HTML-Code» sehen Sie die vollständige Ausgabe ohne Kürzungen — das ist Text, keine Seite, und ausführen lässt er sich nicht. HTML aus der Quelle gelangt nur dann in die Vorschau, wenn Sie das entsprechende Häkchen selbst gesetzt haben. Standardmäßig werden Tags maskiert und als Text angezeigt.