So nutzt du: Markdown zu HTML
- Tippe, füge ein oder öffne eine
.md-Datei im Bereich Markdown. Alternativ klickst du auf Beispiel, um alle unterstützten Elemente zu sehen. - Prüfe das Ergebnis unter Vorschau und wechsle dann zu HTML, um den erzeugten Code zu sehen.
- Schalte Optionen wie GitHub-Flavored Markdown, Zeilenumbrüche, Überschriften-IDs oder ein vollständiges HTML-Dokument ein oder aus.
- Klick auf HTML kopieren, um es in dein CMS oder Template einzufügen, oder auf Herunterladen, um eine
.html-Datei zu speichern.
Was ist ein Markdown-zu-HTML-Konverter?
Markdown ist eine schlanke Auszeichnungssprache für einfachen Text: # für Überschriften, **fett**, - für Listen und Backticks für Code. Browser können das nicht direkt anzeigen, deshalb muss es zuerst in HTML umgewandelt werden. Dieser Konverter erledigt das direkt in deinem Browser mit dem Parser marked und zeigt das Ergebnis nebeneinander an. Das ist praktisch für README-Dateien, Dokumentationen, Blogartikel in Markdown und Inhalte, die du in ein CMS einfügen musst, das nur HTML akzeptiert.
Unterstützte Syntax
| Markdown | HTML-Ausgabe |
|---|---|
## Setup | <h2 id="setup">Setup</h2> |
**fett**, _kursiv_ | <strong>, <em> |
[Link](/docs) | <a href="/docs">Link</a> |
- [x] Erledigt (GFM) | <li><input type="checkbox" checked disabled> Erledigt</li> |
~~alt~~ (GFM) | <del>alt</del> |
| ```js-Codeblock | <pre><code class="language-js"> |
GitHub-Flavored Markdown (GFM) ergänzt Pipe-Tabellen mit Spaltenausrichtung (|:---|:---:|---:|), Task-Listen, Durchstreichung und automatische Verlinkung von nackten URLs. Codeblöcke behalten ihre Sprache als Klasse language-*, die Syntax-Highlighter wie Prism oder highlight.js auslesen.
Ist das erzeugte HTML sicher?
Markdown erlaubt rohes HTML, daher kann ein Dokument <script>-Tags, onerror=-Handler oder javascript:-Links enthalten. Die Vorschau wird vor der Anzeige immer mit DOMPurify bereinigt. Standardmäßig wird die HTML-Ausgabe genauso bereinigt. Wenn du Markdown von Nutzern auf deiner eigenen Website konvertierst, bereinige es zusätzlich auf dem Server. Die Bereinigung im Browser schützt nur diese Seite.
Optionen erklärt
- Zeilenumbrüche werden zu <br> – Standard-Markdown fasst Zeilen innerhalb eines Absatzes zusammen. GitHub-Kommentare behandeln dagegen jeden Zeilenumbruch als echten Umbruch. Aktiviere die Option, um dieses Verhalten nachzuahmen.
- Überschriften-IDs – fügt GitHub-artige
id-Attribute hinzu (kleingeschrieben, mit Bindestrichen, doppelte Namen mit-1,-2versehen). So kannst du auf#installationverlinken oder ein Inhaltsverzeichnis bauen. - Vollständiges HTML-Dokument – umschließt die Ausgabe mit
<!doctype html>,<head>und<body>und verwendet die erste Überschrift als<title>.
Tipps
Lass vor Listen, Tabellen und Codeblöcken eine Leerzeile. Viele Probleme nach dem Muster „Warum wird das nicht gerendert?“ entstehen durch eine fehlende Leerzeile. Brauchst du den umgekehrten Weg? Dann nutze den HTML-zu-Markdown-Konverter und bereinige das Ergebnis mit dem HTML-Formatter.
Auch gesucht als: md zu html, markdown konverter, markdown vorschau, markdown editor online, gfm, github markdown, markdown renderer, md in html umwandeln.
Passende Tools zu: Markdown zu HTML
- Markdown zu Webflow Rich Text — Markdown einfügen, die Vorschau prüfen und als formatierten Rich Text kopieren.
- HTML-Entity-Encoder — Maskiere < > & ", damit Text sicher in HTML angezeigt werden kann, wandle Akzente und Symbole in benannte oder numerische Entities um oder decodiere HTML mit Entities zurück in Klartext.
- Wortzähler — Füge deinen Text ein oder gib ihn ein, um Wörter und Zeichen in Echtzeit zu zählen – dazu kommen Lese- und Sprechzeit, Schlüsselwortdichte sowie Längenprüfungen für SEO-Titel, Meta-Beschreibungen und Social-Media-Beiträge.
- Diff-Checker — Füge die Originalversion und eine geänderte Version ein, um hinzugefügte, entfernte und geänderte Zeilen nebeneinander zu sehen – wobei die genauen Wörter, die sich geändert haben, in jeder Zeile hervorgehoben sind.
Häufige Fragen
Kann ich Markdown in Webflow einfügen?
Wird mein Markdown irgendwohin hochgeladen?
Unterstützt es GitHub-Flavored Markdown?
- [ ] / - [x]), Durchstreichungen mit ~~ und automatisch verlinkte URLs dargestellt, gemäß der GFM-Spezifikation, die auch auf GitHub verwendet wird.Warum verschwindet mein Zeilenumbruch?
<br> zu erzwingen, oder aktiviere die Option „Zeilenumbrüche werden zu <br>“.Kann ich rohes HTML in Markdown verwenden?
<details>, <kbd> oder <sup> bleiben erhalten. Skripte, Event-Handler und javascript:-URLs werden entfernt, außer du schaltest die Bereinigung der Ausgabe aus.Fügt es Codeblöcken Syntax-Highlighting hinzu?
<pre><code class="language-xyz"> aus. Das ist die Konvention, die highlight.js und Prism erwarten. Binde eine dieser Bibliotheken in deine Seite ein, damit der Code farbig dargestellt wird.