Was ist HTML zu Markdown-Konvertierung?
HTML ist das gerenderte Markup, das der Browser anzeigt — <h1>, <ul>, <table>, <a> und der Rest. Markdown ist ein leichtgewichtiges Klartextformat, das mit minimaler Zeichensetzung (# für Überschriften, * für Hervorhebung, - für Listenelemente) dieselbe Struktur kodiert. GitHub Flavored Markdown (GFM) erweitert die ursprüngliche CommonMark-Spezifikation um Tabellen, Durchstreichungen, Aufgabenlisten und Autolinks. HTML in Markdown zu konvertieren überführt gerendertes oder exportiertes HTML zurück in editierbares Klartextformat — genau das, was eine Content-Migration aus einem CMS oder eine README-Bereinigung benötigt.
Welche GitHub Flavored Markdown-Funktionen unterstützt die Ausgabe?
Die mitgelieferte turndown@7.2.0-Engine mit der Erweiterung turndown-plugin-gfm gibt das vollständige GFM-Superset aus deinem HTML aus: Überschriften im ATX-Stil # bis ###### aus <h1>–<h6>, geordnete und ungeordnete Listen mit Verschachtelung, fett **Text** und kursiv *Text*, durchgestrichen ~~Text~~ aus <del>, Inline-Links [Text](url) und Bilder , eingezäunte Codeblöcke mit Sprachhinweisen (```js), Inline-Code-Spans `code`, Pipe-Tabellen aus <table>, GFM-Aufgabenlisten - [ ] / - [x] aus Checkbox-Inputs, Blockzitate > und horizontale Trennlinien ---. Das Vorschaufenster rendert das ausgegebene Markdown mit marked@12.0.2 erneut, damit du die Konvertierung visuell bestätigen kannst.
Wie funktioniert die HTML zu Markdown-Konvertierung?
Jede Konvertierung läuft lokal in deinem Browser mit drei gebündelten Bibliotheken — kein CDN, kein fetch, keine Telemetrie. Die Hauptschritte sind:
- Bereinigen: Das eingefügte HTML wird zunächst durch
DOMPurify.sanitize(html, { USE_PROFILES: { html: true } })geleitet, um<script>-Elemente, alleon*-Event-Handler undjavascript:-URIs zu entfernen, bevor irgendetwas das Markup durchläuft. DOMPurify ist derselbe XSS-Sanitizer, den Mozilla MDN, Atlassian und Microsoft 365 nutzen. - Konvertieren:
turndownService.turndowndurchläuft das bereinigte DOM und gibt GitHub Flavored Markdown aus — Überschriften werden zu#-Präfixen, Listen zu-/1.-Elementen,<table>wird zur Pipe-Tabelle usw. Das Markdown wird übervalue(nieinnerHTML) in das schreibgeschützte<textarea>geschrieben, ist also inhärent sicher. - Rendern: Das ausgegebene Markdown wird von
marked.parseerneut geparst, nochmals durchDOMPurifybereinigt und deminnerHTMLdes Vorschaufensters zugewiesen, sodass du eine visuelle Bestätigung erhältst, dass das Markdown die erwartete Struktur reproduziert. Der Live-Modus debounct Eingaben um 150 ms, damit die Ausgabe beim Einfügen aktualisiert wird, ohne den Parser zu überlasten.
Warum HTML mit diesem Tool in Markdown konvertieren?
- Datenschutz: Jeder Bereinigungs-, Konvertierungs- und Render-Schritt erfolgt in deinem Browser. Das HTML — einschließlich exportierter CMS-Posts, interner Dokumentation und vertraulicher Seitenquellcodes — erreicht unsere Server nie.
- Standardmäßig XSS-sicher: Das eingefügte HTML wird durch DOMPurify geleitet, bevor turndown es durchläuft, und das Vorschaufenster führt das erneut gerenderte HTML vor
innerHTMLwieder durch DOMPurify, sodass das Einfügen von Markup mit<script>-Tags oderonerror=-Handlern eine inerte Vorschau und sauberes Markdown ergibt. - GFM-vollständig:
<table>-Elemente werden zu Markdown-Pipe-Tabellen,<del>zu Durchstreichungen und Checkbox-Listen zu GFM-Aufgabenlisten. Die meisten Online-Konverter verlieren Tabellen auf dem HTML → Markdown-Pfad — die mitgelieferte Erweiterungturndown-plugin-gfmbewahrt sie.
Was sind typische Anwendungsfälle der HTML zu Markdown-Konvertierung?
HTML in Markdown zu konvertieren ist typisch bei Content-Migration, Dokumentation und Archivierung:
- CMS-Migration: Einen WordPress- oder Ghost-Post als HTML exportieren und nach Markdown konvertieren für einen Hugo- / Jekyll- / 11ty- / Astro-Static-Site-Rebuild. Die Konvertierung bewahrt Überschriftenebenen, Links, Listen und Inline-Hervorhebungen.
- README-Bereinigung: Das gerenderte HTML einer Wikiseite oder eines Webartikels einfügen und in editierbares Markdown zurückführen für eine Projekt-README oder Dokumentationsseite, anstatt die Struktur von Hand neu zu tippen.
- Archivierung und Notizen: Eine HTML-E-Mail oder einen Webclip erfassen und in Markdown konvertieren zur Speicherung in Obsidian, Notion oder einer Klartextwissensdatenbank — Markdown bleibt diff-freundlich und übersteht Formatwechsel.
Wie sieht ein HTML zu Markdown-Beispiel aus?
Wenn du <h2>Überschrift</h2><ul><li>a</li><li>b<ul><li>verschachtelt</li></ul></li></ul> einfügst, entsteht Markdown mit ## Überschrift, einer verschachtelten Aufzählungsliste und einem Vorschaufenster, das dieselbe verschachtelte Struktur erneut rendert. Wenn du eine <table> mit einer Kopfzeile und zwei Datenzeilen einfügst, entsteht die äquivalente Pipe-Tabelle | Spalte | Spalte | — was bestätigt, dass die Konvertierung Überschriften, Listen und Tabellen bewahrt.
Läuft dieser HTML zu Markdown-Konverter komplett in meinem Browser?
Ja. Jeder Bereinigungs-, Konvertierungs- und Render-Schritt läuft lokal als JavaScript in deinem Browser-Tab. Die drei gebündelten Bibliotheken — turndown@7.2.0 (mit turndown-plugin-gfm@1.0.2), marked@12.0.2 und DOMPurify@3.1.7 — werden aus derselben Origin wie die Seite ausgeliefert, daher keine CDN-Abhängigkeit, kein fetch, kein XMLHttpRequest, kein navigator.sendBeacon auf die Eingabe. Das Tool funktioniert auch offline, sobald die Seite geladen ist, denn es ist ein statisches HTML/CSS/JS-Bundle, bei dem die Vendor-Bibliotheken danebenliegen. Exportierte Posts, interne Dokumente und vertrauliche Seitenquellcodes bleiben auf deinem Gerät.
Ist das gerenderte Vorschaufenster XSS-sicher?
Ja. Das eingefügte HTML wird durch DOMPurify.sanitize geleitet, bevor turndown es durchläuft, und jede HTML-Zeichenkette, die dem innerHTML der Vorschau zugewiesen wird, durchläuft ebenfalls DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }). DOMPurify ist der von Cure53 gepflegte Open-Source-XSS-Sanitizer; es ist dieselbe Bibliothek, die Mozilla MDN, Atlassian und Microsoft 365 verwenden. Das Standard-html-Profil entfernt <script>-Elemente, jedes on*-Event-Handler-Attribut (onerror, onclick usw.) und javascript:-URI-Schemata. Das Einfügen von <img src=x onerror=alert(1)> erzeugt eine Vorschau, in der document.querySelector('#output-preview img[onerror]') null zurückgibt und kein Alert ausgelöst wird.
Werden GFM-Tabellen aus HTML konvertiert?
Ja. Die Richtung HTML → Markdown nutzt turndown-plugin-gfm, das eine eigene turndown-Regel hinzufügt, die <table>-Knoten durchläuft und das äquivalente Pipe-Tabellen-Markdown ausgibt — eine Kopfzeile, eine Ausrichtungszeile |---|---| und dann Datenzeilen. Die meisten Online-Konverter verlieren Tabellen auf diesem Pfad; dieser hier bewahrt sie. Durchstreichungen (<del>Text</del> → ~~Text~~) und Aufgabenlisten (<input type="checkbox"> → - [ ] / - [x]) werden genauso konvertiert.
Wird mein HTML korrekt konvertiert?
Für den kanonischen GFM-Funktionsumfang — Überschriften h1 bis h6, geordnete und ungeordnete Listen mit Verschachtelung, fett / kursiv / durchgestrichen, Inline-Links, Inline-Bilder, eingezäunte Codeblöcke mit Sprach-Tags, Inline-Code-Spans, Pipe-Tabellen, Aufgabenlisten, Blockzitate, horizontale Trennlinien und Autolinks — ist die Konvertierung sauber und vorhersehbar. Randfälle: HTML-Kommentare (<!-- ... -->) werden entfernt (Markdown hat keine Kommentarsyntax); Inline-Stile und Klassenattribute werden verworfen, da Markdown kein Äquivalent kennt; und ungewöhnliche Inline-Tags wie <sub> / <sup> werden zu reinem Text. Das sind dokumentierte Verhaltensweisen von turndown, keine Bugs.
Wird Syntaxhervorhebung in eingezäunten Codeblöcken unterstützt?
Nicht in v1. Eingezäunte Codeblöcke werden in der Vorschau mit Monospace-Schrift und einem dezenten Hintergrund gerendert, aber ohne Token-Hervorhebung pro Sprache. Syntaxhervorhebung hinzuzufügen würde bedeuten, Prism oder highlight.js zu bündeln, die jeweils 15–40 KB plus eine Grammatikdatei pro Sprache und eine Themen-Matrix mitbringen, die mit der Workshop-Terminal-Palette abgestimmt werden müsste. Vorerst konzentriert sich der Renderer auf Korrektheit und XSS-Sicherheit; bei entsprechender Nutzernachfrage ist ein opt-in-Schalter ein machbarer Folge-Schritt.
Dieser HTML zu Markdown Konverter liefert turndown@7.2.0 (+ turndown-plugin-gfm@1.0.2), marked@12.0.2 und DOMPurify@3.1.7 aus derselben Origin gebündelt mit, gibt das vollständige GFM-Funktionsset aus und bereinigt jede gerenderte HTML-Zeichenkette, bevor sie das DOM berührt. Kein Upload, kein CDN, keine Telemetrie — jedes Byte bleibt in deinem Browser.