Ein Markdown-Editor in geteilter Ansicht mit Live-Vorschau und sauberem HTML-Export. Schreibe links, und der rechte Bereich aktualisiert sich beim Tippen — wechsle jederzeit zwischen dem gerenderten Dokument und dem erzeugten HTML-Quelltext. Überschriften, Fett und Kursiv, Links, Bilder, Listen, Aufgabenlisten, Tabellen, Zitate, Trennlinien und Codeblöcke werden unterstützt. Am Ende kopierst du das HTML in dein CMS oder lädst eine eigenständige .html-Datei herunter.
So konvertierst du Markdown in HTML
- 1 Schreibe oder füge dein Markdown in den linken Editor ein.
- 2 Beobachte die Live-Vorschau rechts, während du schreibst.
- 3 Wechsle zum HTML-Tab, um das erzeugte, eingerückte Markup zu prüfen.
- 4 Kopiere das HTML oder lade ein veröffentlichungsfertiges .html-Dokument herunter.
Wie die Umwandlung arbeitet und warum sie sicher ist
Der Renderer ist eine kleine, von Grund auf geschriebene CommonMark-Teilmenge: Überschriften, Hervorhebung, Inline- und Blockcode, geordnete und ungeordnete Listen, Zitate, Tabellen, Links, Bilder und Trennlinien. Eine vollständige Bibliothek wie marked oder markdown-it einzubinden würde mehr Kilobyte kosten als alle anderen Tools dieser Seite zusammen, und die Teilmenge deckt ab, was Menschen tatsächlich in eine README oder einen Blogbeitrag schreiben.
Das Sicherheitskonzept gehört klar benannt, denn genau hier patzen die meisten Markdown-Konverter. Deine Eingabe wird HTML-maskiert, bevor irgendeine Inline-Analyse stattfindet, und rohes HTML aus der Quelle gelangt nie in die Ausgabe. Ein Markdown-Dokument mit einem Script-Tag erzeugt daher sichtbaren, harmlosen Text statt eines ausgeführten Skripts. Link- und Bild-URLs werden gegen eine Positivliste von Protokollen geprüft, die keinen Code ausführen können — http, https, mailto, tel, Fragmente, relative Pfade und auf Bilder beschränkte Data-URIs —, sodass die klassische javascript:-Link-Injektion ins Leere läuft.
Die Live-Vorschau wird mit innerHTML gerendert, was nur wegen der obigen Maskierung vertretbar ist. Die Option „.html herunterladen" verpackt dieselbe Ausgabe in ein vollständiges HTML-Dokument mit Titel, damit die Datei im Browser korrekt öffnet und nicht als Fragment.
Wofür es gut ist
In ein CMS einfügen
Viele Redaktionssysteme nehmen HTML, aber kein Markdown. In Markdown zu schreiben und am Ende umzuwandeln geht schneller, als sich mit einem WYSIWYG-Editor zu streiten, der beim Tippen umformatiert.
Eine README vorab ansehen
Zu prüfen, wie eine README rendert, bevor du sie pushst, erspart den Commit, der nur eine kaputte Tabelle repariert. Die Vorschau zeigt die Struktur so, wie ein Renderer sie zeigen wird.
E-Mails und Newsletter
In Markdown entwerfen, nach HTML wandeln, ins Newsletter-Werkzeug einfügen. Das Ergebnis ist sauberes semantisches Markup statt der verschachtelten div-Suppe eines Rich-Text-Editors.
Markdown lernen
Auf der einen Seite tippen und auf der anderen die Ausgabe beobachten vermittelt die Syntax schneller als jede Referenztabelle — besonders bei Listen und Tabellen, wo die Einrückung zählt.
Warum ein Markdown-Editor im Browser
Markdown ist der schnellste Weg, strukturierten Text zu schreiben — READMEs, Dokumentation, Blog-Entwürfe, Release Notes — doch veröffentlicht wird meist HTML. Dieser Editor verbindet beides ohne Build-Schritt, ohne Konto und ohne deinen Text auf einen fremden Server zu kopieren. Der Renderer maskiert die Eingabe vor dem Parsen, die Vorschau bleibt also sicher, selbst wenn dein Text spitze Klammern enthält, und das erzeugte HTML ist schlichtes semantisches Markup ohne Framework-Klassen oder Tracking.
Was dieser Renderer nicht unterstützt
Es handelt sich um eine bewusste Teilmenge, nicht um eine vollständige CommonMark-Umsetzung. Es fehlen:
- Rohes HTML wird nicht durchgereicht. Ein Video-iframe oder ein Widget per HTML in deinem Markdown einzubetten zeigt die Tags als Text — eine Sicherheitsentscheidung, kein Versehen.
- Keine GitHub-Erweiterungen über Tabellen hinaus: Aufgabenlisten, Durchstreichung, Fußnoten und Syntaxhervorhebung in Codeblöcken sind nicht implementiert.
- Kein Front-Matter-Parsing. Ein YAML-Block am Dokumentanfang wird als Inhalt gerendert, statt als Metadaten behandelt zu werden.
- Tief verschachtelte oder ungewöhnliche Listenstrukturen entsprechen unter Umständen nicht exakt einem vollständigen Parser. Einfache Verschachtelung funktioniert; nicht alle Grenzfälle der CommonMark-Spezifikation sind abgedeckt.
- Data-URIs, die keine Bilder sind, werden in Links abgelehnt. Nur data:image passiert, da beliebige Data-URIs ein Injektionsvektor sind.
Fehlerbehebung
- Meine HTML-Tags erscheinen als sichtbarer Text
- So gewollt. Rohes HTML wird maskiert statt durchgereicht, ein Dokument mit Markup zeigt dieses Markup also an. Brauchst du HTML in der Ausgabe, wandle das Markdown hier um und ergänze das HTML anschließend von Hand im Ergebnis.
- Meine Liste verschachtelt sich nicht
- Verschachtelung in Markdown hängt an der Einrückung, und die nötige Menge richtet sich nach dem übergeordneten Marker. Rücke das Unterelement um mindestens zwei Leerzeichen ein; vier ist am sichersten und funktioniert überall. Ein Tabulator kann je nach Breite anders ausgelegt werden.
- Meine Tabelle wird nicht dargestellt
- Eine Tabelle braucht die Trennzeile aus Bindestrichen direkt unter der Kopfzeile, mit mindestens drei Bindestrichen je Spalte, und in jeder Zeile gleich viele durch senkrechte Striche getrennte Zellen. Meist fehlt die Trennzeile; am zweithäufigsten hat eine Zeile eine Zelle zu wenig.
Häufige Fragen
Welche Markdown-Syntax wird unterstützt?
Überschriften, Fett, Kursiv, Durchgestrichen, Inline-Code, Codeblöcke, Links, Bilder, geordnete und ungeordnete Listen, Aufgabenlisten, Tabellen, Zitate und Trennlinien.
Ist das erzeugte HTML sauber?
Ja — schlichtes, eingerücktes semantisches HTML ohne Inline-Styles und ohne Framework-Klassen, direkt einsetzbar in jedem CMS oder Template.
Wird mein Entwurf irgendwo gespeichert?
Nein. Der Text existiert nur in der geöffneten Seite. Es wird nichts hochgeladen und beim Schließen des Tabs nichts gespeichert.
Ist die Ausgabe zur Veröffentlichung sicher?
Das von diesem Tool erzeugte HTML kann kein Skript enthalten, da die Eingabe vor dem Parsen maskiert und gefährliche URL-Protokolle herausgefiltert werden. Behandle dennoch Inhalte, die du nicht selbst geschrieben hast, mit der üblichen Vorsicht: Die Zusage gilt für das, was dieser Renderer ausgibt, nicht für das, was du hinterher einfügst.
Werden Tabellen unterstützt?
Ja. Nutze die Pipe-Syntax mit einer Trennzeile aus Bindestrichen unter der Kopfzeile. Spaltenausrichtung per Doppelpunkt in der Trennzeile ist die gängige Erweiterung und verhält sich wie erwartet.
Kann ich HTML zurück in Markdown wandeln?
Mit diesem Tool nicht — es wandelt in eine Richtung. Der Rückweg ist ein deutlich schwierigeres Problem, da beliebiges HTML keine saubere Markdown-Entsprechung hat und das Ergebnis stets Nacharbeit braucht.
Wird mein Dokument irgendwohin gesendet?
Nein. Der Renderer ist ein JavaScript-Modul, das in deinem Tab läuft, ohne Netzwerkzugriff. Entwürfe, interne Dokumentation und unveröffentlichte Texte bleiben vollständig auf deinem Gerät.