§

HTML einfügen

§

Rohdaten

§

Vorschau

Die Vorschau wird mit DOMPurify bereinigt — Script-Tags, Event-Handler und javascript:-URIs werden vor dem Rendern entfernt.

Markdown ist die Lingua franca der Software-Dokumentation in den USA und im Vereinigten Königreich. Jede GitHub-README, Stack-Overflow-Antwort und jeder Reddit-Kommentar läuft durch einen Markdown-Parser, und die über 100 Millionen Entwickler-Posts auf Stack Overflow verlassen sich auf CommonMark für zuverlässiges Rendering. US-Bundeslabore betreiben MkDocs- und Sphinx-Pipelines, die Markdown-Quelldateien in statische Dokumentationsportale umwandeln, während GOV.UK-Content-Designer Serviceseiten in Markdown schreiben, bevor sie veröffentlicht werden. Notion, Obsidian und Bear bieten Markdown-first-Notizen an Millionen von Wissensarbeitern in den USA und im Vereinigten Königreich, und Substack-Newsletter kompilieren Markdown-Entwürfe zu HTML-E-Mails. Exportiertes HTML zurück in Markdown zu konvertieren ist tägliche Arbeit für technische Redakteure, Open-Source-Maintainer und Plattform-Engineers in beiden Märkten.

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 ![alt](src), 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:

  1. Bereinigen: Das eingefügte HTML wird zunächst durch DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) geleitet, um <script>-Elemente, alle on*-Event-Handler und javascript:-URIs zu entfernen, bevor irgendetwas das Markup durchläuft. DOMPurify ist derselbe XSS-Sanitizer, den Mozilla MDN, Atlassian und Microsoft 365 nutzen.
  2. Konvertieren: turndownService.turndown durchlä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 über value (nie innerHTML) in das schreibgeschützte <textarea> geschrieben, ist also inhärent sicher.
  3. Rendern: Das ausgegebene Markdown wird von marked.parse erneut geparst, nochmals durch DOMPurify bereinigt und dem innerHTML des 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 innerHTML wieder durch DOMPurify, sodass das Einfügen von Markup mit <script>-Tags oder onerror=-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 Erweiterung turndown-plugin-gfm bewahrt 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.