Skripte, Stile und eingebettete Medien werden entfernt; unbekannte Tags behalten ihren Text. Tabellen werden GFM-Tabellen.

Einen Blogbeitrag in eine README, eine Dokumentationsseite in ein Wiki oder einen Webartikel in deine Notizen zu übernehmen heißt, das HTML loszuwerden, ohne die Struktur zu verlieren. Dieser Konverter parst das Markup wie ein Browser und schreibt das entsprechende Markdown — Überschriften bleiben Überschriften, verschachtelte Listen bleiben verschachtelt, Tabellen bleiben Tabellen — während Skripte, Stile und Tracking-Pixel verschwinden.

Schritte

1. 1 Füge das HTML — eine ganze Seite oder ein Fragment — in das obere Feld ein. In den meisten Browsern kannst du es per Rechtsklick und Seitenquelltext anzeigen kopieren.
2. 2 Lies das Markdown darunter; es aktualisiert sich beim Tippen. Verschachtelte Listen, Codeblöcke mit Sprache und Tabellen mit Ausrichtung bleiben erhalten.
3. 3 Kopiere das Ergebnis oder lade es als .md-Datei herunter.

Was wird zu was

Die Überschriften h1 bis h6 werden Raute-Überschriften; p wird ein Absatz, br ein harter Zeilenumbruch und hr eine Linie. strong und b werden doppelte Sternchen, em und i einfache Sternchen, del und s doppelte Tilden; code wird zu Backticks und pre zu einem eingezäunten Block, der eine Sprachklasse als Zaunbezeichnung behält. Links werden [Text](URL), Bilder ; ul und ol werden Strich- und nummerierte Listen mit zwei Leerzeichen Verschachtelung; blockquote wird zu Zeilen mit Größer-als-Zeichen; table wird eine GFM-Tabelle, deren Ausrichtung aus align-Attributen oder text-align-Stilen stammt.

Warum es auf dem DOM arbeitet, nicht auf Text

Reguläre Ausdrücke können HTML nicht zuverlässig verarbeiten: Tags verschachteln sich, Attribute enthalten spitze Klammern in Strings, und echte Seiten sind selten wohlgeformt. Der Konverter übergibt das HTML dem Parser des Browsers, der nicht geschlossene und falsch verschachtelte Tags genau so repariert wie beim Rendern, und läuft dann den entstandenen Baum ab. Deshalb kommt ein Link in Fettschrift in einem Listenpunkt richtig heraus.

Was entfernt wird und was bleibt

script, style, head, noscript, template, iframe, object, embed, svg, canvas, video und audio werden mit Inhalt entfernt — keines hat eine Markdown-Entsprechung, die meisten sind Rauschen. Alles andere Unbekannte behält seinen Text: ein eigenes Element, ein span oder div gilt als Container, seine Kinder werden umgewandelt. Inline-Formatierung in unbekannten Tags bleibt daher erhalten.

Escaping und saubere Ausgabe

Zeichen, die in Markdown die Bedeutung ändern würden — Sternchen, Unterstriche, Backticks, Backslashes sowie Raute oder Bindestrich am Zeilenanfang — werden im Text maskiert, damit die Rückumwandlung nach HTML dasselbe Ergebnis liefert. Leerraum wird wie im Browser zusammengefasst, außer in pre. Leerzeilen werden auf eine zwischen Blöcken reduziert.