Markdown-Vorschau und HTML-Konverter

Sehen Sie Ihr Markdown direkt nebenan gerendert und kopieren Sie das HTML — die Vorschau läuft abgeschottet in Ihrem Browser.

So funktioniert es

  1. Geben Sie Ihr Markdown links ein oder fügen Sie es ein — die Vorschau rechts aktualisiert sich während der Eingabe.
  2. Aktivieren Sie „Einzelne Zeilenumbrüche als
    behandeln“, wenn Sie für ein Chatfenster oder ein Kommentarfeld schreiben, wo jedes Enter eine neue Zeile beginnt.
  3. Klicken Sie auf „In HTML umwandeln“, um den HTML-Quelltext anzuzeigen, und kopieren Sie ihn oder laden Sie eine fertig nutzbare .html-Datei herunter.

Über dieses Tool

Markdown ist einfacher Text mit ein paar Konventionen der Zeichensetzung — eine Raute für eine Überschrift, Sternchen für Hervorhebung, ein Bindestrich für einen Listenpunkt —, die ein Konverter in HTML verwandelt. Dieses Tool rendert es mit marked im GitHub-Flavored-Markdown-Modus, damit erhalten bleibt, was Menschen tatsächlich schreiben: Tabellen, mit einer Sprache ausgezeichnete Codeblöcke, Aufgabenlisten, Durchgestrichenes und nackte URLs, die zu Links werden. Die Vorschau steht neben dem Editor und zeichnet sich während der Eingabe neu, sodass Sie die kaputte Tabelle oder den nicht geschlossenen Codeblock beim Schreiben bemerken und nicht erst, nachdem Sie die README gepusht haben.

Ein Markdown-Konverter muss eine Sicherheitsentscheidung treffen, und diese Seite benennt sie, statt sie zu beschönigen: marked bereinigt nichts. Markdown erlaubt rohes HTML mit Absicht, also kommen ein script-Tag, ein Bild mit einem onerror-Handler oder ein Link auf eine javascript:-URL genau so aus dem Parser heraus, wie sie hineingegangen sind. Das innerhalb dieser Seite zu rendern, wäre eine Cross-Site-Scripting-Lücke. Statt einen Bereiniger zu schreiben, wird die Vorschau in einem iframe gezeichnet, dessen sandbox-Attribut leer ist — sämtliche Beschränkungen sind aktiv. Ohne allow-scripts wird nichts ausgeführt und kein Event-Handler ausgelöst; ohne allow-same-origin sitzt der Rahmen in einem undurchsichtigen Origin und kann weder diese Seite noch ihre Cookies oder ihren Speicher lesen. Eine Content-Security-Policy mit default-src 'none' innerhalb des Rahmens ist eine zweite, unabhängige Schicht. Ein Bereiniger hätte Ihnen etwas anderes gezeigt als das HTML, das Sie gleich kopieren — und in einer Vorschau ist genau das der falsche Handel.

Was bewusst nicht bereinigt wird, ist das HTML selbst, denn es ist das Produkt: Kopieren und Herunterladen liefern Ihnen exakt das, was marked erzeugt hat. Enthält Ihr Markdown also etwas, das Code ausführen kann, benennt das Tool es — script, iframe, form, ein on-Handler, eine javascript:-URL — und erinnert Sie daran, dass die Abschottung an der Vorschau endet. Veröffentlichen Sie dieses HTML, wenn das Markdown von jemand anderem stammt, wandert das Risiko mit. Alles läuft in JavaScript auf Ihrem eigenen Gerät, und nichts, was Sie eingeben, wird hochgeladen. Die einzige Anfrage, die die Vorschau stellt, ist eine, die Sie selbst geschrieben haben: wenn ein Bild auf eine externe URL zeigt. Links in der Vorschau sind nicht anklickbar — der Preis der Sandbox, und für eine Vorschau ein niedriger.

Häufig gestellte Fragen

Verlässt mein Markdown meinen Browser?

Nein. Der Text wird von JavaScript auf Ihrem Gerät geparst und gerendert: Nichts wird an einen Server gesendet, gespeichert oder protokolliert. Trennen Sie nach dem Laden der Seite die Internetverbindung, und das Tool funktioniert weiter.

Bereinigt dieses Tool das HTML?

Nein, und es tut auch nicht so. Die Vorschau ist in einem abgeschotteten iframe isoliert, dort läuft also nichts — aber das HTML, das Sie kopieren, ist genau das, was der Parser erzeugt hat. Stammt das Markdown von jemand anderem, bereinigen Sie es, bevor Sie es veröffentlichen.

Warum sind die Links in der Vorschau nicht anklickbar?

Weil im Vorschaurahmen sämtliche Sandbox-Beschränkungen aktiv sind, und die Navigation gehört dazu — derselbe Schalter, der verhindert, dass ein javascript:-Link ausgelöst wird. Kopieren Sie das HTML, wenn Sie die Links aktiv brauchen.

Welche Markdown-Variante wird unterstützt?

GitHub Flavored Markdown: CommonMark plus Tabellen, Codeblöcke mit Sprachauszeichnung, Aufgabenlisten, Durchgestrichenes und automatische Links. Überschriften erhalten keine id-Attribute, die Anker, die GitHub für ein Inhaltsverzeichnis erzeugt, fehlen also.

Was ist der Unterschied zwischen dem kopierten HTML und der heruntergeladenen Datei?

Kopieren liefert das HTML-Fragment, das Sie in eine bereits vorhandene Seite einfügen. Der Download verpackt es in ein vollständiges Dokument mit UTF-8-Zeichensatz und lesbarer Gestaltung, sodass es sich für sich allein korrekt öffnet — mit intakten Akzenten und Umlauten.

Meine einzelnen Zeilenumbrüche sind verschwunden. Warum?

Weil ein einzelner Zeilenumbruch in Standard-Markdown nur ein Leerzeichen ist — Absätze werden durch eine Leerzeile getrennt. Chatfenster und Kommentarfelder brechen bei jedem Enter um; aktivieren Sie deshalb „Einzelne Zeilenumbrüche als
behandeln“, wenn Sie für so ein Feld schreiben.

Verwandte Tools

Lange Links? Kürzen Sie sie kostenlos

Vai.la verwandelt jede URL in einen Kurzlink mit Klick-Statistiken, QR-Code und Ihrem eigenen Biolink.

Vai.la übernimmt keine Verantwortung für die Nutzung der Tools oder für Entscheidungen, die auf ihren Ergebnissen basieren.