HTML zu Markdown Konverter

Was die HTML-zu-Markdown-Konvertierung tatsächlich tut

Ein HTML-zu-Markdown-Konverter parst ein HTML-Fragment, läuft den resultierenden DOM-Baum entlang und gibt für jedes erkannte Element Markdown-Syntax aus. <h1> wird zu #; <strong> wird zu **fett**; <a href="..."> wird zu [text](url); <ul><li> wird zu einer Aufzählung. Das Werkzeug läuft vollständig in Ihrem Browser via JavaScript: HTML links einfügen, auf In Markdown konvertieren klicken, und die formatierte Ausgabe erscheint rechts. Kein Upload, kein Server-Roundtrip, keine Telemetrie, überprüfen Sie es im Netzwerk-Tab der DevTools, während Sie auf Konvertieren klicken, oder schalten Sie die Seite nach dem Laden offline (Flugmodus), und der Konverter funktioniert weiter. Diese Implementierung verwendet den eingebauten DOMParser des Browsers, um das HTML zu lesen, dann gibt ein kleiner rekursiver Walker das Markdown für jeden Knoten aus. Es ist ein handgeschriebener Konverter mit etwa 150 Zeilen statt eines Wrappers um Turndown, was bedeutet, dass er den Allgemeinfall sauber abdeckt, aber nicht die volle Konfigurierbarkeit von Turndown erreicht.

Wann Sie diese Konvertierung wirklich brauchen

Die umgekehrte Richtung (Markdown zu HTML) ist die berühmte, jeder Static-Site-Generator und jedes Schreibwerkzeug tut es. Die Vorwärts-richtung (HTML zu Markdown) ist weniger offensichtlich, aber zunehmend üblich, weil sich das Schreibwerkzeug-Ökosystem polarisiert hat: HTML ist das Umgebungsformat des Webs (jedes CMS, jede Newsletter-Plattform, jede CRM-Vorlage, jede alte statische Seite gibt HTML aus oder speichert HTML); Markdown ist das native Format jedes modernen Dokumentations-, Notiz- und unter Versionskontrolle stehenden Inhalts-Workflows, der seit etwa 2014 entstanden ist. Vier reale Workflows erzeugen diesen Konvertierungsbedarf.

• Artikel-Scraping für Notiz-Apps. Einen Webartikel in Obsidian, Notion, Logseq oder Roam speichern, alle speichern Notizen als Markdown-Dateien. Obsidians offizieller Web Clipper (2024 veröffentlicht) und die beliebte Browser-Erweiterung MarkDownload folgen diesem Muster: das Artikel-DOM mit Mozillas Readability-Bibliothek extrahieren, in Markdown konvertieren, auf Festplatte speichern. Wenn Sie das zugrunde liegende HTML nicht über eine Erweiterung erreichen können (Paywall-Inhalte, eingebettete Reader, per E-Mail eintreffende Inhalte), kopieren Sie den gerenderten Text, fügen das resultierende HTML in einen Konverter ein, speichern das Markdown.
• CMS-Migration zu einem Markdown-First-SSG. Dokumentation von WordPress, Confluence, Drupal, Mediawiki oder Movable Type zu MkDocs (Tom Christie, Python), Docusaurus (Meta, React), Hugo (Steve Francia, Go), Jekyll (Tom Preston-Werner, Ruby, immer noch die Engine hinter GitHub Pages), Eleventy (Zach Leatherman, Node), VitePress (Evan You, Vue) oder Sphinx-with-MyST verschieben. Alle sind nativ Markdown; vorhandener CMS-Inhalt muss als HTML exportiert und en masse konvertiert werden.
• WYSIWYG-Editor-Ausgabe in portables Markdown. Eine Schreiberin nutzt Google Docs, Word, Apple Notes, Evernote oder den Rich-Text-Editor eines CMS, und die Zwischenablage-Nutzlast ist HTML. Sie will sauberes Markdown, um es nach Git zu committen, in einen Markdown-Editor zu kleben, an einen Entwickler zu senden oder in eine Doc-Site einzufügen. Microsoft Words „Als Webseite speichern“ produziert berüchtigt dichtes HTML (voller XML-Namespaces, mso-präfixierter CSS, Office-spezifischer Tags) und ein Konverter, der alles ignoriert, was er nicht versteht, und sauberes Markdown ausgibt, ist genau das richtige Aufräumwerkzeug.
• E-Mail-Inhalt zur Archivierung. Newsletter-Plattformen (Substack, Kit/ConvertKit, Beehiiv, Mailchimp) senden alle formatiertes HTML. Ein Leser, der Referenzmaterial in Markdown ablegt, kann den Quelltext des E-Mail-Body anzeigen, das HTML in einen Konverter einfügen und das Ergebnis in seine Notizen ablegen.

Die Referenzimplementierung: Turndown und seine Familie

Turndown (Dom Christie) ist die dominierende JavaScript-Bibliothek für HTML zu Markdown, sie startete 2012 als to-markdown, wurde 2017 in Turndown umbenannt, um sich von Forks abzuheben, und wird unter MIT-Lizenz auf npm als turndown veröffentlicht. Ihr Design ist regelbasiert: jede Regel hat einen filter (auf welchen DOM-Knoten die Regel feuert) und ein replacement (eine Funktion, die das Markdown produziert). Der Konstruktor akzeptiert Optionen für Überschriftenstil (atx # vs. setext ===), Aufzählungsmarker (-, + oder *), Code-Block-Stil (eingerückt vs. eingezäunt), Hervorhebungs-Begrenzer (* vs. _), Fett-Begrenzer (** vs. __), Link-Stil (inline vs. referenziert) usw. Tabellen, Durchstreichungen, Aufgabenlisteneinträge und Autolinks leben im separaten Paket turndown-plugin-gfm. markdownify (Matthew Tretter) ist das Pendant in Python, weit verbreitet in Scraping-Pipelines, Jupyter-Notebook-Konvertierung, LangChain-Document-Loadern und LLM-Datensatz-Vorbereitung. html2text (ursprünglich von Aaron Swartz, der 2004 auch mit John Gruber am ursprünglichen Markdown-Design zusammenarbeitete) ist die ältere Python-Option, immer noch im Einsatz in Legacy-E-Mail-Pipelines, aber weitgehend abgelöst. html-to-markdown (Johannes Kaufmann) ist ein Go-Port von Turndown, beliebt für eigenständige Scraping-Binärdateien. Pandoc (John MacFarlane, der das CommonMark-Projekt leitet) ist der universelle Dokumentenkonverter, er behandelt Tabellen mit zusammengeführten Zellen über Grid Tables, Mathe, Zitate, Fußnoten, Definitionslisten und konvertiert zwischen Dutzenden Formaten. Pandoc ist das funktions-reichste verfügbare HTML-zu-Markdown-Werkzeug, aber es ist ein über 60 MB großes Haskell-Binary, das installiert werden muss; es läuft nicht im Browser.

Der grundlegende Kompromiss: HTML ist reicher als Markdown

Jede HTML-zu-Markdown-Konvertierung ist notwendigerweise verlustbehaftet, weil das Quellformat Dinge ausdrückt, die das Zielformat nicht kann. Inline-Stile (<span style="color:red">) haben keine Markdown-Grammatik, Markdowns Hervorhebungs-Vokabular ist strikt fett/kursiv/durchgestrichen/Code, ohne Syntax für beliebige Farbe, Schrift oder Größe. CSS-Klassen (<div class="alert">) haben Bedeutung für ein Stylesheet, aber keine für Markdown. Benutzerdefinierte Daten-Attribute (data-track-event="...") sind Teil des JavaScript-Vertrags der Seite, nicht des Dokuments. Tabellen mit zusammengeführten Zellen (colspan, rowspan) lassen sich nicht in GFM-Pipe-Tabellen ausdrücken. Eingebettete Medien (<video>, <audio>, <iframe>) und Formularsteuerelemente haben keine Markdown-Entsprechung. <details><summary>-Klappboxen, <figure><figcaption>, <ruby>-Anmerkungen für CJK-Aussprache, Microdata und Microformate, nichts davon übersteht die Konvertierung. Für jede nicht unterstützte Konstruktion wählt der Konverter-Autor eine von drei Strategien: übersetzen in eine Markdown-Annäherung, die Information verliert, durchreichen als rohes HTML, eingebettet im Markdown (Markdown erlaubt das per Spezifikation; CommonMark-Abschnitte 4.6 und 6.6 decken es ab), oder weglassen ganz. Diese Implementierung wählt „übersetzen, wo es eine klare Zuordnung gibt, sonst transparent umhüllen (Kinder rendern, Tag verwerfen)“, ein vorhersagbares, leicht nachvollziehbares Standardverhalten, das den Allgemeinfall auf Kosten fortgeschrittener Konfigurierbarkeit abdeckt.

Die kanonischen Zuordnungen

• Überschriften: <h1>–<h6> werden auf # bis ###### abgebildet (atx-Stil). Die ältere setext-Form (=== und ----Unterstreichungen) ist auch für h1 und h2 gültig, aber im Jahr 2026 selten verwendet.
• Absätze: <p> wird zu Klartext, umgeben von Leerzeilen. Ein Absatz-Umbruch in Markdown ist eine oder mehrere Leerzeilen.
• Hervorhebung: <strong> und <b> werden zu **fett**. <em> und <i> werden zu *kursiv*. <del> und <s> werden zu ~~durchgestrichen~~ (eine GFM-Erweiterung; nicht in CommonMark selbst).
• Links: <a href="url">text</a> wird zu [text](url). Die Referenz-Link-Form ([text][1] mit [1]: url unten) ist ebenfalls gültiges Markdown.
• Bilder: <img src="url" alt="text"> wird zu ![text](url). Das Ausrufezeichen unterscheidet Bilder von Links.
• Code: <code> wird zu Inline-Backtick-Spans. <pre><code> wird zu einem Triple-Backtick-Codeblock. Diese Implementierung behandelt korrekt die CommonMark-Anforderung, dass Inline-Code-Spans einen längeren Zaun verwenden, wenn der Inhalt Backticks enthält (entspricht der Spezifikationsregel aus CommonMark §6.1).
• Listen: <ul> wird zu --Aufzählungszeilen; <ol> wird zu 1., 2., ... nummerierten Zeilen. CommonMark akzeptiert jede Startnummer; Renderer normalisieren.
• Blockzitate: <blockquote> stellt jedem Kind eines > voran.
• Horizontale Linien: <hr> wird zu --- auf einer eigenen Zeile. *** und ___ sind ebenfalls gültig.
• Zeilenumbrüche: <br> wird zu einem Newline. CommonMark akzeptiert auch zwei abschließende Leerzeichen oder einen Backslash am Zeilenende.
• Tabellen: <table> wird zu einer GFM-Pipe-Tabelle, Kopfzeile, Trennzeile aus ---, Body-Zeilen. GFM-Erweiterung; nicht im CommonMark-Kern.

Ehrlicher Umfang: Was dieses Werkzeug tut und nicht tut

Drei ehrliche Einschränkungen, die man kennen sollte. (1) Inline-Stile und CSS-Klassen werden verworfen. Ein <span style="color:red"> wird zu unstilisierten Text; ein <p class="lede"> verliert seine Klasse. Es gibt keine Markdown-Grammatik für beliebiges Inline-Styling. (2) Tabellen mit zusammengeführten Zellen werden abgeflacht. GFM-Pipe-Tabellen haben keine Syntax für colspan oder rowspan; Informationen über zusammengeführte Zellen werden stillschweigend verworfen. Für komplexe Tabellen halten Sie die Quelle als HTML innerhalb des Markdown (CommonMark erlaubt eingebettetes HTML) oder verwenden Sie Pandoc mit Grid-Tabelle als Ausgabe. (3) Code-Blöcke werden ohne Sprachhinweis ausgegeben. Wenn Ihr HTML <pre><code class="language-js"> enthält, wird das Sprachattribut derzeit verworfen, die Ausgabe ist ein Codeblock ohne Sprache. Sie können den Sprach-Identifier manuell nach den öffnenden Backticks anhängen, wenn Ihr Ziel-Renderer Syntax-Highlighting unterstützt. Der größere Vorbehalt: Wenn Sie das vollständige HTML einer Webseite einfügen (von „Quelltext anzeigen“), werden <script>- und <style>-Inhalte als Klartext ausgegeben, fast sicher nicht das, was Sie wollen. Die Lösung: nur den Artikelinhalt einfügen, oder aus der gerenderten Ansicht kopieren (die Skripte und Stile automatisch entfernt), oder das HTML vor der Konvertierung mit DOMPurify oder ähnlichem säubern.

Markdowns Form im Jahr 2026

Markdown wurde 2026 zweiundzwanzig. John Gruber veröffentlichte das ursprüngliche Perl-Skript 2004 mit Aaron Swartz als Design-Mitarbeiter. Tabellen wurden bewusst aus Grubers Original weggelassen; die Pipe-Tabellen-Syntax, die die meisten Leser heute kennen, stammt aus späteren Dialekten, vor allem GitHub Flavored Markdown. CommonMark, der rigorose Spezifikationsaufwand, organisiert von Jeff Atwood und John MacFarlane im Jahr 2014, ist jetzt bei Version 0.31.2 (28. Januar 2024) und ist der Dialekt, auf den die meisten modernen Parser zielen. GitHub Flavored Markdown (GFM, formalisiert in Version 0.29-gfm am 6. April 2019) ist die GFM-Obermenge, die Tabellen, Aufgabenlisten, Durchstreichungen, Autolinks und Regeln zum Verbot von Roh-HTML hinzufügt. GFM ist der Dialekt, den die meisten Nutzer wegen GitHubs Skala tatsächlich im Web sehen. Markdown ist heute das native Format praktisch jedes Entwickler-Doku-Ökosystems; HTML bleibt das universelle Ausgabeformat des Webs; die Konvertierung zwischen beiden ist genauso verbreitet wie die umgekehrte und existiert für den Moment, in dem Sie sie schnell brauchen, in einem Browser, ohne Installation und ohne dass Daten Ihr Gerät verlassen.

Privatsphäre: Warum nur-im-Browser hier zählt

In einen Konverter eingefügtes HTML enthält oft Spuren der ursprünglichen Quelle, interne CMS-Auszeichnungen, noch nicht veröffentlichte Entwürfe, Kundendaten in E-Mail-Vorlagen, Link-URLs, die interne Site-Struktur preisgeben, Bildreferenzen, die auf private Asset-Server zeigen. Serverseitige Konverter laden alles davon zu einem Drittanbieter-Dienst hoch. Dieses Werkzeug läuft vollständig in Ihrem Browser via JavaScript: das HTML, das Sie einfügen, überquert nie das Netzwerk, überprüfen Sie es im Netzwerk-Tab der DevTools, während Sie auf Konvertieren klicken, oder schalten Sie die Seite nach dem Laden offline (Flugmodus), und der Konverter funktioniert weiter. Sicher für unveröffentlichte Entwürfe, Kunden-E-Mail-Vorlagen, Auszüge aus interner Dokumentation oder jedes HTML, das Sie nicht auf der Festplatte eines Fremden sehen möchten.

Häufig gestellte Fragen

Funktioniert das mit großen Dateien?

Ja, weil die Konvertierung in Ihrem Browser läuft, ist die praktische Obergrenze der verfügbare Speicher Ihres Geräts. Zehntausende Zeilen werden auf einem modernen Laptop in deutlich unter einer Sekunde konvertiert. Sehr große Eingaben (Millionen Knoten) können den Tab kurz einfrieren, während der DOM-Walker rekursiert. Für Batch-Konvertierung eines kompletten CMS-Exports ist ein Skript mit Turndown unter Node oder markdownify unter Python das bessere Werkzeug.

Was passiert mit Inline-Stilen und CSS-Klassen?

Komplett verworfen. Markdowns Hervorhebungs-Grammatik deckt fett, kursiv, durchgestrichen und Code ab; es gibt keine Syntax für beliebige Farbe, Schrift, Größe oder klassengesteuertes Styling. Wenn visuelles Styling in Ihrer Ausgabe wichtig ist, behalten Sie das Original entweder als HTML oder verwenden Sie ein reichhaltigeres Zielformat wie AsciiDoc, reStructuredText oder MDX (Markdown plus JSX-Komponenten, von Docusaurus verwendet). Für die Anwendungsfälle Artikel-Archivierung und CMS-Migration, für die dieses Werkzeug gebaut ist, ist das Verwerfen von Stilen das richtige Verhalten, der ganze Sinn von Markdown ist, das visuelle Rauschen zu entfernen und nur die Struktur zu behalten.

Funktioniert dieses Werkzeug offline?

Ja, sobald die Seite geladen ist, läuft die Konvertierung vollständig in JavaScript innerhalb Ihres Browsers. Keine Netzwerk-Aufrufe während der Konvertierung. Überprüfen Sie es im Netzwerk-Tab der DevTools, während Sie auf Konvertieren klicken, oder schalten Sie das Gerät nach dem Laden offline (Flugmodus), und das Werkzeug funktioniert weiter.

Ist das Turndown?

Nein. Turndown (Dom Christies Bibliothek) ist die Referenzimplementierung in JavaScript und das offensichtliche Werkzeug, zu dem man in einem Node-Projekt greift, aber es ist eine substanzielle Abhängigkeit mit voller Konfigurierbarkeit für Überschriftenstil, Aufzählungsmarker, Link-Stil, Code-Block-Stil usw. Dieses Browser-Werkzeug ist ein kleinerer handgeschriebener DOM-Walker (etwa 150 Zeilen) der den Allgemeinfall (Überschriften, Absätze, Hervorhebung, Links, Bilder, Listen, Blockzitate, eingezäunter Code, einfache Tabellen) ohne die Konfigurations-fläche bedient. Für die Workflows, für die dieser Site gebaut ist (einmalige Konvertierungen im Browser, keine Installation), ist die kleinere Implementierung die richtige Form; für produktive Scraping-Pipelines, die konfigurierbare Regeln benötigen, bleibt Turndown die richtige Wahl.

Wie werden Tabellen behandelt?

Als GFM-Pipe-Tabellen: eine Kopfzeile, eine Trennzeile aus Bindestrichen und eine Body-Zeile pro <tr>. Pipe-Tabellen sind flach, sie können colspan, rowspan, mehrzeiligen Zellinhalt, Listen in Zellen oder Pro-Zellen-Ausrichtung nicht darstellen. Wenn Ihre HTML-Tabelle irgendeine dieser Funktionen verwendet, gibt dieser Konverter eine abgeschwächte Pipe-Tabelle aus, die die zusätzliche Struktur verliert. Für komplexe Tabellen zwei praktische Optionen: (a) die Tabelle als Roh-HTML innerhalb des Markdown behalten (CommonMark erlaubt eingebettetes HTML) und darauf vertrauen, dass Ihr Ziel-Renderer es durchreicht; (b) Pandoc mit Grid-Tabelle als Ausgabe verwenden, was zusammengeführte Zellen ausdrücken kann.

Kann ich das vollständige HTML einer Webseite einfügen?

Sie können, sollten aber wahrscheinlich nicht. Der vollständige Quelltext einer modernen Webseite enthält <script>-Tags mit JavaScript-Code, <style>-Blöcke mit CSS, Tracking-Pixel, Werbeauszeichnungen und CMS-Vorlagen-Kommentare. Dieser Konverter entfernt nicht ausdrücklich Skript- und Style-Inhalte, sodass all das als Klartext in Ihrer Markdown-Ausgabe landet. Der saubere Ansatz: Wählen Sie nur das Artikel-Element in den DevTools (Rechtsklick auf den Artikel, „Untersuchen“, dann Rechtsklick auf den passenden Knoten im Elements-Panel und „outerHTML kopieren“), oder verwenden Sie einen Inhalts-Extraktionsschritt (Mozillas Readability-Bibliothek oder ihre verpackte Form in Firefox Reader View) vor dem Einfügen. Für Browser-Erweiterungs-Workflows, die den Extraktionsschritt automatisch übernehmen, siehe Obsidian Web Clipper oder MarkDownload.

Verwandte Tools