Markdown zu HTML exportieren

Markdown ist der schnellste Weg, strukturierte Inhalte zu schreiben, aber das Web läuft mit HTML. Die Brücke dazwischen sollte sofort und sicher sein. Öffne den Markdown Editor, um Markdown zu schreiben, das HTML live rendern zu sehen und saubere, bereinigte Ausgabe zu exportieren — alles in deinem Browser.

TL;DR

Markdown schreiben, HTML sofort sehen, kopieren oder speichern.

• Live-Vorschau beim Tippen — drei Ansichten (Geteilt, Editor, Vorschau), damit du bearbeiten, lesen oder beides zugleich tun kannst.
• Sauberes, sicheres HTML — die Ausgabe wird mit DOMPurify bereinigt, also sicher, um sie in ein CMS oder eine E-Mail einzufügen.
• Kopieren oder speichern — HTML in die Zwischenablage holen oder ein eigenständiges .html-Dokument lokal speichern.

Was Markdown ist

Markdown ist eine leichtgewichtige Auszeichnungssprache, um Text mit einfachen, lesbaren Zeichen zu formatieren. Ein # macht eine Überschrift, Gedankenstriche eine Liste, Sternchen eine Hervorhebung, und eine einfache URL kann ein Link werden. Der Quelltext bleibt nah an reinem Text, deshalb greifen Leute dazu, sobald sie mehr als einen Absatz strukturierten Inhalt schreiben.

Es wird überall eingesetzt, wo technisch geschrieben wird — README-Dateien, Dokumentationsseiten, Blogbeiträge, Release-Notes und interne Wikis. Der Grund ist einfach: Markdown lässt sich ohne jedes Werkzeug schreiben und lesen und wird zu angereichertem HTML, wenn du es brauchst.

Im Hintergrund rendert dieses Werkzeug Markdown mit der markdown-it-Engine nach der CommonMark-Spezifikation — der standardisierten, klar definierten Auslegung von Markdown. Das bedeutet vorhersehbare, konsistente Ausgabe statt der Dialekt-für-Dialekt-Überraschungen, für die ältere Markdown-Varianten bekannt waren.

Vorschau und Ansichten

Während du tippst, wird das HTML live in der Vorschau gerendert. Drei Ansichten steuern, wie viel du siehst:

• Geteilt — Editor links, gerenderte Vorschau rechts. Die Standardeinstellung und die beste Ansicht beim Schreiben, weil du Quelle und Ergebnis zusammen siehst.
• Editor — nur die Markdown-Eingabe, volle Breite. Hilfreich, wenn du dich aufs Schreiben konzentrierst und die Vorschau nicht brauchst.
• Vorschau — nur das gerenderte HTML. Nützlich, um das fertige Ergebnis zu lesen oder es jemandem zu zeigen.

Wechsle jederzeit die Ansicht. In den Ansichten Geteilt und Vorschau wird die gerenderte Ausgabe bei jedem Tastendruck aktualisiert.

Schritt für Schritt: HTML exportieren

Der Markdown Editor wird vollständig in deinem Browser ausgeführt. So geht’s:

1. Tippe oder füge dein Markdown ein in das Eingabefeld. Nutze Beispiel, um ein Beispiel zu laden, wenn du von einer Vorlage starten willst, oder Zurucksetzen, um alles zu leeren.
2. Wähle eine Ansicht. Entscheide dich für Geteilt, Editor oder Vorschau, je nachdem, ob du Quelle, Ergebnis oder beides sehen willst.
3. Schalte die vier Optionen um. Jede verändert, wie Markdown gerendert wird:
   • Weiche Zeilenumbruche — einfache Zeilenumbrüche in deinem Text werden zu <br> in der Ausgabe, anstatt zusammengezogen zu werden.
   • URLs verlinken — nackte URLs wie https://example.com werden automatisch zu anklickbaren Links.
   • Typografie — ersetzt gerade Anführungszeichen durch typografisch korrekte (geschwungene Anführungszeichen, Gedankenstriche).
   • Rohes HTML — erlaubt dir, Inline-HTML ins Markdown einzubetten. Hinweis: auch eingeschaltet wird die Ausgabe bereinigt (siehe unten), sodass gefährliche Tags und Handler entfernt werden, bevor du sie siehst oder kopierst.
4. Prüfe das Statistik-Feld. Es zeigt Zeichen, Wörter, Zeilen, Überschriften, Links und Codeblöcke — ein schneller Weg, um zu bestätigen, dass die Struktur wie gewünscht herauskam.
5. Exportiere. Klicke auf HTML kopieren, um das gerenderte HTML in die Zwischenablage zu legen, oder HTML speichern, um ein eigenständiges .html-Dokument zu speichern. Du kannst auch Markdown kopieren oder Markdown speichern, um die .md-Quelle zu exportieren.

Bereinigung und Sicherheit

Das ist der Teil, der die Ausgabe wirklich sicher macht, um sie in ein CMS, eine E-Mail oder ein Wiki einzufügen. Jeder Teil des gerenderten HTML — egal ob aus der Markdown-Syntax oder aus von dir eingebettetem rohem HTML — durchläuft DOMPurify, bevor es in die Vorschau oder die Zwischenablage gelangt.

DOMPurify (konfiguriert mit USE_PROFILES: { html: true }) entfernt die gefährlichen Teile: <script>-Tags, Inline-Event-Handler wie onclick und andere Vektoren, die Code ausführen könnten. Es verbietet außerdem den style-Tag und das style-Attribut, sodass Styling-Tricks nicht durchschlüpfen. Sollte DOMPurify selbst jemals scheitern, fängt ein Regex-basierter Ausweich-Sanitizer die schlimmsten Fälle ab, damit du niemals rohes, unsicheres HTML erhältst.

Wenn die Roheingabe von der bereinigten Ausgabe abweicht, zeigt das Werkzeug “Unsicheres HTML wurde aus der Vorschau entfernt.” — einen Zähler des entfernten Inhalts. Dieser Hinweis signalisiert dir, dass etwas entfernt wurde, genau das, was du willst, bevor du irgendwo Sensibles einfügst.

Grenzen und Ehrlichkeit

Einige ehrliche Einschränkungen, damit du genau weißt, was du bekommst:

• CommonMark, nicht GitHub Flavored Markdown. Dieses Werkzeug folgt CommonMark per markdown-it. Es rendert keine GitHub-spezifischen Erweiterungen wie Tabellen oder Durchstreichungen (~~Text~~) allein per Markdown-Syntax. Brauchst du eine Tabelle oder durchgestrichenen Text, aktiviere Rohes HTML und schreibe das HTML direkt — es wird trotzdem bereinigt.
• style wird entfernt. Weil DOMPurify den style-Tag und das Attribut verbietet, überlebt Inline-Styling aus deinem rohen HTML nicht die Ausgabe.
• Rohes HTML ist optional und wird trotzdem bereinigt. Die Option Rohes HTML lässt Inline-HTML durch den Markdown-Parser, aber das gerenderte Ergebnis wird danach bereinigt. Es ist sicher, aber kein Weg, beliebiges Markup auszuführen.

Häufige Fragen

Ist die HTML-Ausgabe sicher?

Ja. Jedes gerenderte HTML durchläuft DOMPurify, bevor es in die Vorschau, den Kopieren-Button oder den Download gelangt. Skripte, Event-Handler sowie der style-Tag und das Attribut werden entfernt. Wurde etwas entfernt, siehst du den Hinweis “Unsicheres HTML wurde aus der Vorschau entfernt.”.

Unterstützt es GitHub-Tabellen?

Nicht per Markdown-Syntax. Das Werkzeug folgt CommonMark, das keine native Tabellensyntax hat. Um eine Tabelle einzufügen, aktiviere Rohes HTML und schreibe das <table>-Markup direkt — es wird wie jedes andere HTML gerendert und bereinigt.

Kann ich die HTML-Datei speichern?

Ja. HTML speichern sichert ein eigenständiges .html-Dokument mit grundlegendem Styling, bereit zum Öffnen in jedem Browser. Du kannst auch HTML kopieren in die Zwischenablage nehmen, wenn du es woanders einfügen willst.

Was ist CommonMark?

CommonMark ist eine standardisierte Spezifikation für Markdown, die die Mehrdeutigkeit älterer Dialekte aufhebt. Dieses Werkzeug nutzt die markdown-it-Engine, um CommonMark zu rendern, sodass dieselbe Eingabe zuverlässig dieselbe Ausgabe erzeugt. Es ist kein GitHub Flavored Markdown — Funktionen wie Tabellen und Durchstreichungen gehören nicht zur Kernspezifikation.