HTML in Markdown umwandeln

Was dieser Konverter macht

HTML ist das, woraus Webseiten gebaut sind. Markdown ist eine leichtere Art, dieselbe Struktur mit einfachen Zeichen zu schreiben: # für eine Überschrift, - für einen Listenpunkt, ** für fett. Zwischen beiden wird ständig umgewandelt. Du ziehst einen Blogbeitrag aus einem CMS in eine statische Website um, fügst eine Webseite in eine README ein oder machst aus Notizen in Markdown HTML für eine E-Mail-Vorlage.

Diese Seite funktioniert in beide Richtungen. HTML in Markdown nutzt Turndown, einen weit verbreiteten Konverter, mit zusätzlichen Regeln für Tabellen und Codeblöcke. Markdown in HTML nutzt marked mit eingeschaltetem GitHub Flavored Markdown.

So nutzt du ihn

1. Wähl eine Richtung mit HTML in Markdown oder Markdown in HTML.
2. Füge Text in das linke Feld ein, klicke auf Datei öffnen oder auf Beispiel, um es auszuprobieren. Das Ergebnis aktualisiert sich beim Tippen.
3. Für HTML in Markdown wählst du den Stil der Überschriften (Rautenzeichen oder unterstrichen), das Zeichen für Aufzählungen und wie Codeblöcke geschrieben werden (eingezäunt oder eingerückt).
4. Für Markdown in HTML schaltest du Zeilenumbrüche werden zu <br> ein, wenn einzelne Zeilenumbrüche als Umbrüche erhalten bleiben sollen, wie in GitHub-Kommentaren.
5. Wechsle zwischen Code und Vorschau, um das dargestellte Ergebnis zu sehen, und nimm es dann mit Kopieren oder Herunterladen.

Beispiel: HTML in Markdown

Dieses HTML:

<h1>Release notes</h1>
<p>Version <strong>2.4</strong> adds <a href="https://example.com/docs">offline mode</a> and fixes <em>three</em> bugs.</p>
<ul>
  <li>Faster search</li>
  <li>New <code>--quiet</code> flag</li>
</ul>
<pre><code class="language-bash">npm install [email protected]</code></pre>
<table>
  <tr><th>Platform</th><th>Status</th></tr>
  <tr><td>Windows</td><td>Ready</td></tr>
</table>

wird zu diesem Markdown:

# Release notes

Version **2.4** adds [offline mode](https://example.com/docs) and fixes *three* bugs.

- Faster search
- New `--quiet` flag

```bash
npm install [email protected]
```

| Platform | Status |
| --- | --- |
| Windows | Ready |

Die Klasse language-bash am Codeblock wird zum Sprach-Tag nach dem öffnenden Zaun. So funktioniert die Syntaxhervorhebung weiterhin auf GitHub und in den meisten Generatoren für statische Websites. Verschachtelte Listen werden unter ihrem Elternpunkt eingerückt, und eine nummerierte Liste behält ihre Nummern.

Beispiel: Markdown in HTML

Dieses Markdown:

## Install

Run `npm install` and open **http://localhost:3000**.

- [x] Node 20
- [ ] Docker

ergibt dieses HTML:

<h2>Install</h2>
<p>Run <code>npm install</code> and open <strong><a href="http://localhost:3000">http://localhost:3000</a></strong>.</p>
<ul>
<li><input checked="" disabled="" type="checkbox"> Node 20</li>
<li><input disabled="" type="checkbox"> Docker</li>
</ul>

Hier sind zwei GitHub-Erweiterungen am Werk. Die nackte URL wurde zu einem Link, und die Einträge der Aufgabenliste wurden zu Checkboxen. Tabellen mit :-: in der Trennzeile bekommen align="center" an ihren Zellen.

Standardmäßig bleibt ein einzelner Zeilenumbruch innerhalb eines Absatzes im Quelltext ein einfacher Zeilenumbruch, den Browser als Leerzeichen anzeigen. Mit Zeilenumbrüche werden zu <br> werden Line one und Line two in getrennten Zeilen zu <p>Line one<br>Line two</p>.

Umlaute und Sonderzeichen bleiben in beide Richtungen so, wie sie sind. Entitäten wie ä im HTML werden beim Umwandeln in Markdown zu einem normalen ä.

Was wegfällt

Markdown beschreibt Struktur, kein Design. Beim Weg von HTML zu Markdown gilt:

• Blöcke wie script, style, noscript und template werden entfernt.
• Klassen, IDs, Inline-Styles und Data-Attribute fallen weg.
• Hüllelemente wie div und span verschwinden, ihr Text bleibt aber.
• Tabellenzellen mit mehreren Absätzen werden zu einer Zeile zusammengefügt, weil eine Markdown-Tabellenzeile in eine Zeile passen muss. Ein senkrechter Strich in einer Zelle wird als \| escaped.
• Verbundene Zellen (colspan) werden mit leeren Zellen aufgefüllt, damit jede Zeile gleich viele Spalten hat.

Wenn du ein exaktes Layout brauchst, lass den Inhalt als HTML. Die meisten Markdown-Renderer erlauben Blöcke mit rohem HTML.

Tipps

• Kopier nach Möglichkeit aus dem Seitenquelltext, nicht aus der dargestellten Seite. Beim Kopieren des dargestellten Textes gehen die Tags verloren, die der Konverter braucht.
• Ist das HTML minifiziert oder unordentlich, ist das Ergebnis dasselbe, weil der Konverter die Struktur liest, nicht den Leerraum. Um das HTML selbst zu lesen, schick es zuerst durch den HTML Formatter.
• Schick das Markdown danach durch den Markdown Formatter, um aufgefüllte Tabellen und einheitliche Hervorhebungen zu bekommen.
• Für ein Word-Dokument nimm den Konverter Word in Markdown, der die .docx-Datei direkt liest.

Andere Wege zur Umwandlung

• Pandoc wandelt auf der Kommandozeile zwischen Dutzenden Formaten um. pandoc page.html -o page.md ist die Grundform.
• Editoren: VS Code zeigt mit Strg+Umschalt+V eine Markdown-Vorschau. Mehrere Erweiterungen ergänzen einen Befehl zum Einfügen von HTML als Markdown.
• Code: Die Bibliothek Turndown in JavaScript und das Paket markdownify in Python wandeln HTML in deinen eigenen Skripten in Markdown um.

Alles auf dieser Seite läuft in deinem Browser. Das HTML, das du einfügst, wird als inaktives Dokument geparst. Nichts darin wird ausgeführt oder geladen, während es umgewandelt wird.