HTML-in-Markdown-Konverter

So wandeln Sie HTML in Markdown um

1. Wählen Sie die Richtung: HTML → Markdown oder Markdown → HTML.
2. Fügen Sie Ihren Code in das Eingabefeld ein oder klicken Sie auf Datei öffnen, um eine .html-, .htm-, .md- oder .txt-Datei von Ihrem Rechner zu laden (bis 10 MB).
3. Passen Sie die Optionen an. Für HTML → Markdown wählen Sie den Stil der Überschriften, das Listenzeichen und den Stil der Codeblöcke. Für Markdown → HTML ist HTML bereinigen (Skripte und Event-Handler entfernen) standardmäßig aktiviert.
4. Klicken Sie auf Umwandeln. Das Ergebnis wird auch beim Tippen aktualisiert.
5. Kopieren oder laden Sie das Ergebnis herunter. Richtung tauschen schiebt das Ergebnis zurück in die Eingabe, sodass Sie es in die andere Richtung umwandeln und den Hin- und Rückweg prüfen können.

Die Vorschau unter dem Ergebnis zeigt, wie das Markdown dargestellt wird – so prüfen Sie die Umwandlung auf einen Blick.

Was die Umwandlung HTML → Markdown macht

Der Konverter liest Ihr HTML mit dem Parser des Browsers in einem inaktiven Dokument: Skripte laufen nicht, Bilder werden nicht heruntergeladen. Dann durchläuft er die Seitenstruktur und schreibt für jedes Element die Markdown-Entsprechung:

• <h1> bis <h6> werden zu Überschriften. ATX (# Titel) schreibt # bis ######; Setext (unterstrichen) unterstreicht Überschriften der Ebenen 1 und 2 mit === bzw. --- (Ebenen 3 bis 6 verwenden immer #).
• <strong> und <b> werden zu **fett**, <em> und <i> zu _kursiv_, Inline-<code> zu Backticks.
• Links werden zu [Text](url "Titel"), Bilder zu ![alt](src).
• Listen verwenden das gewählte Zeichen (-, * oder +); nummerierte Listen behalten ihre start-Nummer, verschachtelte Listen werden eingerückt.
• <pre><code> wird zu einem Codeblock, entweder Umzäunt (```) oder Eingerückt (4 Leerzeichen).
• <blockquote>, <hr> und Zeilenumbrüche werden ebenfalls umgewandelt.
• <script>, <style>, <iframe>, <noscript> und ähnliche Elemente werden samt Inhalt entfernt.

Zeichen, die sonst als Markdown-Syntax gelesen würden, etwa ein * oder # am Zeilenanfang, werden mit einem Backslash escapt, damit der Text wörtlich bleibt.

GitHub Flavored Markdown

Mit aktivierter Option GitHub Flavored Markdown (Tabellen, ~~Durchstreichen~~, Aufgabenlisten):

• Tabellen werden zu Pipe-Tabellen mit ausgerichteten Spalten. Die Kopfzeile stammt aus einer <thead>-Zeile oder einer Zeile nur aus <th>-Zellen; gibt es keine, wird eine leere Kopfzeile ergänzt, weil GFM eine verlangt. Die Spaltenausrichtung wird aus align="right" oder style="text-align: center" gelesen. Senkrechte Striche in Zellen werden als \| escapt, Zeilenumbrüche werden zu <br>, und ein colspan wird mit leeren Zellen aufgefüllt. Eine <caption> wird als Absatz über der Tabelle ausgegeben.
• <del>, <s> und <strike> werden zu ~~durchgestrichen~~.
• Kontrollkästchen am Anfang von Listenpunkten werden zu Aufgabenlisten: - [x] erledigt, - [ ] offen.

Für verschachtelte Tabellen, verbundene Zeilen oder Zellformatierung hat Markdown keine Entsprechung. Eine Tabelle, die eine weitere Tabelle enthält, bleibt als rohes HTML erhalten, was die meisten Markdown-Renderer akzeptieren. Ohne die GFM-Option bleiben alle Tabellen HTML.

Markdown → HTML

In der Gegenrichtung wird das Markdown mit einem CommonMark-konformen Parser gerendert, bei aktivierter Option mit den GFM-Erweiterungen. Die Ausgabe sind HTML-Fragmente, bereit zum Einfügen in ein CMS, eine E-Mail-Vorlage oder eine Webseite. Ist HTML bereinigen (Skripte und Event-Handler entfernen) aktiviert, wird im Markdown eingebettetes rohes HTML gesäubert: <script>-Tags, onclick-Attribute und javascript:-Links werden entfernt. Deaktivieren Sie die Option nur für Markdown, das Sie selbst geschrieben haben.