🔃 HTML-zu-Markdown-Konverter

Inhalte aus HTML nach Markdown zu überführen, ist überwiegend mechanisch, doch die Details entscheiden, ob das Ergebnis sauber oder voller verirrter Tags ist. Dieser Konverter durchläuft das geparste DOM und gibt Markdown mit Inline-Links aus: Er behält sichtbare Inhalte, entfernt Skripte und Styles und packt unbekannte Tags aus, statt sie in die Ausgabe durchsickern zu lassen. Die Umwandlung geschieht lokal im Browser, eingefügte Inhalte bleiben also auf Ihrem Rechner.

Verwendung

1. Fügen Sie ein HTML-Snippet oder ein vollständiges Dokument in den Eingabebereich ein oder laden Sie das Beispiel, um die Zuordnung zu sehen.
2. Lesen Sie die Markdown-Ausgabe, die sich bei jedem Tastenschlag ohne Umwandeln-Schaltfläche aktualisiert.
3. Kopieren Sie das Ergebnis in die Zwischenablage oder laden Sie es als .md-Datei herunter.

Was der Konverter mit jedem Element macht

HTML	Markdown-Ausgabe
h1 bis h6	ATX-Überschrift mit einem bis sechs #
p	Absatz mit Leerzeile
br	einzelner Zeilenumbruch
hr	----Linie
strong, b	**fett**
em, i	*kursiv*
code	Inline-Backticks
pre	eingezäunter Codeblock
a	[Text](href), Inline-Stil
img	
ul, ol, li	Aufzählungszeichen oder Nummern, verschachtelt mit zwei Leerzeichen Einzug
blockquote	>-zitierte Zeilen
table	Pipe-Tabelle mit Trennlinie nach Zeile eins

Tags wie div, section, article, header und footer werden als generische Blöcke behandelt: Ihre Kinder werden gerendert und eine Leerzeile wird eingefügt. Unbekannte Inline-Tags werden ausgepackt, damit ihr Text erhalten bleibt.

Ein Praxisbeispiel

Eingabe:

<h2>Release notes</h2>
<p>Version <strong>2.1</strong> adds a <a href="/docs">docs</a> link.</p>
<ul>
  <li>Faster build
    <ul><li>Incremental cache</li></ul>
  </li>
  <li>New CLI flag</li>
</ul>

Ausgabe:

## Release notes

Version **2.1** adds a [docs](/docs) link.

- Faster build
  - Incremental cache
- New CLI flag

Die verschachtelte Liste erhält genau zwei Leerzeichen Einzug, das strong-Tag wird zu doppelten Sternchen und der Link zu einem Inline-Paar [Text](href).

Tabellen, Listen und Verschachtelung

Tabellen werden aus ihren tr- und td-Zeilen neu aufgebaut. Zelleninhalte werden auf eine einzelne Zeile abgeflacht, literale Pipe-Zeichen als \| maskiert, und die Spaltenzahl wird von der breitesten Zeile übernommen, wobei fehlende Zellen aufgefüllt werden. Listen werden rekursiv gerendert: Nur direkte li-Kinder werden nummeriert oder mit Aufzählungszeichen versehen, und eine in einem Eintrag verschachtelte Liste wird mit tieferem Einzug in eine eigene Zeile gesetzt.

Wann die Ausgabe verlustbehaftet ist

Der Konverter bevorzugt sauberen Text gegenüber pixelgenauer Treue, daher wird einiges bewusst verworfen oder vereinfacht:

• Skripte, Styles, noscript, template und Kopf-Inhalte werden vollständig entfernt.
• HTML-Kommentare erscheinen nie in der Ausgabe.
• colspan und rowspan werden ignoriert, verbundene Zellen werden also zu getrennten leeren Zellen.
• Verschachtelte Tabellen können flach werden, da jede Nachkommenzeile in eine Tabelle gesammelt wird.
• Komplexe Leerzeichen werden zusammengefasst, und Text in pre bleibt erhalten, außer führenden und abschließenden Leerzeilen.
• Iframes und andere eingebettete Widgets tragen keinen Text, aus ihnen überlebt also nichts.
• Es wird keine Markdown-Maskierung angewendet, Quelltext mit *, _, ` oder [ kann seine Bedeutung beim erneuten Rendern also ändern.

Wenn die Ausgabe in einen strengen Renderer geht, suchen Sie sie einmal nach verirrten Sternchen oder Unterstrichen um Text ab, der im ursprünglichen HTML literal war.

Häufige Umwandlungsfehler

Einige Überraschungen erklären die meisten Beschwerden. Leerzeichen aus der Quelleneinrückung werden zu einzelnen Leerzeichen zusammengefasst, alles, was nur durch Markup-Abstand ausgerichtet war, verliert also diese Ausrichtung. Ein Link ohne href wird auf seinen Text reduziert, was meist harmlos ist, doch ein Bild ohne src verschwindet vollständig. br-Tags werden zu echten Zeilenumbrüchen, und ob diese einen Absatz unterbrechen, hängt vom umgebenden Block ab. Da der Konverter Markdown-Syntax nie maskiert, wird ein Produktname wie 5*4*3 beim Rendern der Ausgabe zur Hervorhebung, und ein verirrter Unterstrich in einem Benutzernamen kann den Rest einer Zeile kursiv setzen. Die Prüfung dieser vier Punkte deckt die große Mehrheit der rauen Kanten ab.

Inhalte aus einem CMS migrieren

Der zuverlässigste Weg, einen Artikel zu überführen, ist, mit dem gerenderten HTML statt mit dem Export des Editors zu arbeiten. Öffnen Sie die Seite, zeigen Sie den Quelltext an oder kopieren Sie das Artikel-Element und fügen Sie das Markup hier ein. Prüfen Sie dann die Ausgabe in vier Durchgängen: Überschriften sollten zur Struktur Ihrer Zielseite passen, Codeblöcke sollten eingezäunt und bei Bedarf mit einer Sprache für die Syntaxhervorhebung versehen sein, Tabellen sollten die beabsichtigte erste Zeile als Kopfzeile erhalten und Inline-Links auf die erwarteten URLs zeigen. Speichern Sie das Ergebnis als .md-Datei und ergänzen Sie den Frontmatter, den Ihre statische Seite erwartet. Da die Umwandlung sofort erfolgt, ist es praktisch, einen Artikel nach dem anderen zu verarbeiten und jedes Ergebnis zu prüfen, statt einem Massenlauf blind zu vertrauen.

Warum überhaupt zu Markdown konvertieren

Markdown ist leichter zu lesen, zu diffen und zu prüfen als HTML. In einem Git-Repository erscheint eine Wortänderung an einem Markdown-Absatz als einzeiliger Diff, während dieselbe Änderung in HTML Attribute und schließende Tags berühren kann. Markdown ist außerdem portabel: Dieselbe Datei rendert in Static-Site-Generatoren, Notiz-Apps, README-Dateien und Dokumentationssystemen. HTML bleibt die bessere Wahl, wenn Sie präzises Layout, eingebettete Widgets oder Styling brauchen — genau deshalb ist die Umwandlung in eine Richtung, während die Quelle in HTML bleibt, ein verbreiteter Arbeitsablauf. Konvertieren Sie einmal für Archivierung oder Veröffentlichung und behalten Sie das reichere HTML dort, wo es weiterhin gebraucht wird.

Verwandte Tools

• Markdown-Editor — Markdown schreiben und die gerenderte Vorschau live sehen.
• Markdown-Tabellengenerator — Pipe-Tabellen für Markdown-Dokumente erstellen.
• HTML-Encoder/-Decoder — HTML-Sonderzeichen für die sichere Ausgabe maskieren und wieder entschlüsseln.