Skip to main content
UtilityStack

Markdown-zu-HTML-Konverter

Geben Sie links Markdown ein und sehen Sie rechts das gerenderte HTML oder die Live-Vorschau. Angetrieben von marked, unterstützt CommonMark plus GitHub-Flavored-Markdown-Erweiterungen.

Markdown
HTML
<h1>Hello, Markdown!</h1>
<p>Markdown is a <strong>lightweight</strong> markup language with plain-text formatting syntax.</p>
<h2>Features</h2>
<ul>
<li>Headings, paragraphs, lists</li>
<li>Links: <a href="https://example.com">example</a></li>
<li>Inline code: <code>const x = 1</code></li>
<li>Code blocks:</li>
</ul>
<pre><code class="language-js">function greet(name) {
  return `Hello, ${name}!`
}
</code></pre>
<blockquote>
<p>Blockquotes work too.</p>
</blockquote>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody><tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</tbody></table>

Was ist Markdown?

Markdown ist eine leichtgewichtige Klartext-Formatierungssyntax, die John Gruber 2004 erfand. Sie können strukturierte Dokumente (Überschriften, Listen, Links, Code, Tabellen) mit einer Interpunktion schreiben, die sich natürlich liest — # für eine Überschrift, ** für fett, > für ein Zitat — anstelle von HTML-Spitzklammern. Es ist das De-facto-Format für README-Dateien, Static-Site-Posts, technische Dokumentation und Tools wie Notion oder Slack.

CommonMark ist der standardisierte Markdown-Dialekt, den die meisten modernen Parser implementieren; GitHub Flavored Markdown (GFM) erweitert ihn um Tabellen, Aufgabenlisten, eingezäunte Codeblöcke mit Sprachhinweisen, Durchstreichen und Auto-Links. Dieser Konverter unterstützt beides.

So verwenden Sie dieses Tool

  1. Geben Sie Markdown in das linke Eingabefeld ein oder fügen Sie es ein. Klicken Sie auf „Beispiel“, um mit Beispielinhalt zu testen.
  2. Wechseln Sie das rechte Bedienfeld zwischen HTML (die Rohausgabe) und Vorschau (das gerenderte Ergebnis).
  3. Verwenden Sie „HTML kopieren“, um die Ausgabe in die Zwischenablage zu legen, oder „.html herunterladen“, um eine eigenständige Datei zu speichern.

Häufig gestellte Fragen

Welche Markdown-Variante wird unterstützt?

CommonMark plus die nützlichsten GFM-Erweiterungen: Tabellen, eingezäunte Codeblöcke (mit Sprache), Durchstreichen, Auto-Links. Definitionslisten, Fußnoten und HTML im Markdown sind standardmäßig nicht aktiviert.

Wird die Eingabe an einen Server gesendet?

Nein. Die Konvertierung erfolgt vollständig in Ihrem Browser — Ihre Markdown-Quelle verlässt nie Ihren Rechner.

Kann ich rohes HTML im Markdown einbinden?

Inline-HTML wird unverändert beibehalten. Seien Sie vorsichtig, wenn Sie die Ausgabe in einen Kontext zurückkopieren, wo Script-Tags oder unsichere Attribute eine Rolle spielen könnten — bereinigen Sie sie (mit DOMPurify oder einem serverseitigen Bereinigungstool), bevor Sie nicht vertrauenswürdige Ausgaben rendern.

Werden Codeblöcke syntaktisch hervorgehoben?

Die Ausgabe liefert saubere ```sprache```-Codeblöcke mit dem Standard-Markup `<pre><code class="language-xxx">`. Wir bündeln keinen Syntax-Highlighter, damit das HTML klein und portabel bleibt. Stecken Sie auf der Empfängerseite highlight.js, Prism oder Shiki ein, um die Blöcke einzufärben — alle lesen die Sprachklasse nativ aus.

Wie gut verarbeitet es große Dokumente?

Die Konvertierung läuft vollständig clientseitig in einem einzigen Durchgang, sodass ein typisches buchlanges Dokument mit 50.000 Wörtern auf einem modernen Laptop problemlos in unter einer Sekunde gerendert wird. Der Engpass ist der Layout-Pass des Browsers, wenn Sie extrem lange Ausgaben in ein contenteditable einfügen. Bei sehr großen Eingaben bevorzugen Sie das Herunterladen des HTML, anstatt die Seite die Vorschau live neu rendern zu lassen.

Häufige Anwendungsfälle

Aufgaben, bei denen die Konvertierung von Markdown zu HTML im Browser echte Zeit spart.

Eine README in ein CMS migrieren

Fügen Sie eine Projekt-README ein und kopieren Sie das HTML direkt in einen WordPress-, Ghost- oder Notion-Block — pandoc muss nicht installiert werden.

Eine HTML-E-Mail verfassen

Schreiben Sie den Body in Markdown, konvertieren Sie und legen Sie das HTML in eine Transactional-E-Mail-Vorlage. Behalten Sie die Quelle als Klartext, um Änderungen einfach zu halten.

Eine PR vor dem Push prüfen

GitHub rendert Markdown serverseitig; das gibt Ihnen lokal dieselbe Vorschau, damit ein Tippfehler in einer Überschrift den Reviewer nicht überrascht.

Dokumentations-Schnipsel umwandeln

Ziehen Sie ein Stück interner Doku in Markdown und fügen Sie das HTML in einen Help-Center-Artikel, eine Support-Antwort oder ein Wiki ein, das kein Markdown spricht.

Tipps und Kniffe

Kleine Anpassungen, die die Ausgabe nutzbarer machen.

Tag-en Sie Ihre Codeblöcke

Geben Sie nach den öffnenden Backticks immer die Sprache an (z. B. ```ts). Die Ausgabe erhält eine language-xxx-Klasse, die highlight.js oder Prism ohne weitere Konfiguration einfärben können.

Vor dem Rendern nicht vertrauenswürdiger Eingaben sanitisieren

Wenn das Markdown von einem Benutzer kommt, lassen Sie das HTML durch DOMPurify laufen, bevor Sie es rendern — Markdown erlaubt rohes HTML, einschließlich Script-Tags.

Tabellen funktionieren; komplexe Layouts nicht

GFM-Tabellen werden sauber konvertiert. Bei mehrspaltigen Layouts oder design-lastigem Inhalt fallen Sie direkt im Markdown auf HTML zurück, anstatt mit der Syntax zu kämpfen.

Alt-Text bei Bildern beibehalten

![](url) rendert, aber das leere alt schadet SEO und Accessibility. Fünf Sekunden für `![Eine kurze Beschreibung](url)` — Ihr zukünftiges Ich wird es Ihnen danken.

Ähnliche Tools