Markdown zu HTML

Das Tool konvertiert Markdown nach HTML mit CommonMark plus GitHub Flavored Markdown (GFM), wobei weiche Zeilenumbrüche als <br> gerendert werden. Du kannst die gerenderte Vorschau sehen oder auf HTML-Quellansicht umschalten, um die generierten Tags zu prüfen. Die Ausgabe eignet sich zum Einfügen in Blogplattformen, E-Mail-Tools oder überall, wo HTML akzeptiert wird.

Beispiel

Eingabe-Markdown:

# Release notes

We shipped **three** things this week:

- [x] Faster cold start
- [ ] Dark mode (next week)

See the [docs](https://example.com/docs) for details.

```js
console.log("hello");
```

Gerenderte HTML-Quelle:

<h1>Release notes</h1>
<p>We shipped <strong>three</strong> things this week:</p>
<ul>
<li><input type="checkbox" checked disabled> Faster cold start</li>
<li><input type="checkbox" disabled> Dark mode (next week)</li>
</ul>
<p>See the <a href="https://example.com/docs">docs</a> for details.</p>
<pre><code class="language-js">console.log("hello");
</code></pre>

Häufige Fehler und Fallstricke

Die meisten Überraschungen beim Markdown-Rendern stammen aus einer kleinen Gruppe Syntax-Fallen. Wenn die Vorschau falsch aussieht, ist meist eine davon die Ursache.

• Fehlende Leerzeile vor einer Liste. "Intro text\n- item" wird als ein Absatz gerendert. Setze eine Leerzeile zwischen Intro und dem ersten Listenpunkt.
• Eingerückter Codeblock, obwohl du einen Absatz wolltest. Vier führende Leerzeichen machen aus jeder Zeile einen Codeblock. Entferne die Einrückung oder nutze explizit einen Fenced-Block ```.
• Kaputte Tabelle. Jede GFM-Tabelle braucht eine Trennzeile (| --- | --- |) mit mindestens drei Bindestrichen pro Spalte und derselben Anzahl Pipes in jeder Zeile.
• Link mit Leerzeichen in der URL. [click](my page.html) bricht den Parser. URL-encode das Leerzeichen als %20 oder nutze spitze Klammern: <my page.html>.
• Sternchen innerhalb von Wörtern. wild*card rendert je nach umgebendem Text als Hervorhebung — oder auch nicht. Mit Backslash escapen: wild\*card.
• HTML-Escaping innerhalb von Codeblöcken. Eingefügte Snippets mit &lt; erscheinen wörtlich, weil sie bereits escaped sind. Füge den rohen Quelltext vor dem Escaping ein.

Welche Markdown-Variante wird unterstützt?

CommonMark plus GitHub Flavored Markdown (GFM). Das deckt Tabellen, Fenced-Codeblöcke, Task-Listen, Durchstreichen und automatisch verlinkte URLs ab. Zeilenumbrüche innerhalb von Absätzen werden zu <br>-Tags, weil die Option breaks aktiv ist — das entspricht der Kommentardarstellung auf GitHub und in den meisten Chat-Apps.

Wird HTML in meinem Markdown saniert?

Nein. Die gerenderte Vorschau lässt rohes HTML standardmäßig durch. So bleiben eingebettete <details> oder <kbd> funktionsfähig. Füge kein nicht vertrauenswürdiges Markdown ein und kopiere die Ausgabe nicht auf eine öffentliche Seite, ohne sie vorher durch einen Sanitizer wie DOMPurify zu schicken.

Werden Fußnoten, Mathe oder Diagramme unterstützt?

Nein. Das ist schlichtes GFM. Fußnoten, Mathe (KaTeX/MathJax) und Mermaid-Diagramme sind GitHub- oder Plattform-Erweiterungen und werden hier nicht gerendert. Wenn du sie brauchst, nimm einen Markdown-Renderer mit den passenden Plugins oder füge die Ausgabe in eine Plattform ein, die sie rendert.

Was passiert, wenn ich HTML kopieren klicke?

Die gerenderte HTML-Quelle wird per Clipboard-API in deine Zwischenablage geschrieben. Du bekommst das HTML ohne die Wrapper-Chrome der Seite — nur die Tags, die dein Markdown repräsentieren. Füge es in ein CMS, einen E-Mail-Editor oder direkt in eine Datei ein. Auf der Platte werden keine Dateien erzeugt.

Warum wirken meine Tabellen verschoben?

GFM-Tabellen brauchen eine Header-Zeile, eine Trennzeile mit mindestens drei Bindestrichen pro Spalte und Pipes zwischen den Zellen. Eine fehlende Pipe oder eine Trennzeile mit nur zwei Bindestrichen schlägt still fehl. Wechsle zur HTML-Quellansicht, um zu sehen, ob tatsächlich ein <table> erzeugt wurde.

Speichert ihr das Markdown, das ich hier einfüge?

Nein. Wir speichern weder das eingegebene oder eingefügte Markdown noch das heruntergeladene gerenderte HTML. Alles wird verworfen, sobald du den Tab schließt oder aktualisierst — keine Logs, keine Aufzeichnung bei uns darüber, was du geschrieben hast. Schau ruhig in die DevTools des Browsers.