Markdown-Vorschau online — live rendern, HTML kopieren
Ein Live-Markdown-Editor mit bereinigtem HTML zum Kopieren oder Speichern
Verarbeitung im Browser · kein Hochladen
Wenn eingeschaltet, wird Ihr Text nur in diesem Browser gespeichert (nie an einen Server gesendet). Beim Ausschalten wird der gespeicherte Text gelöscht.
Vorschau
Vorschau-Engine wird geladen …
Das Vorschau-HTML wird immer bereinigt: Skripte, Event-Attribute, javascript:-Links, iframes und Formulare werden entfernt. Enthält Ihr Text Bild-URLs, lädt Ihr Browser diese Bilder direkt von ihren Adressen.
Was das Tool ist
Die Markdown-Vorschau zeigt das gerenderte Ergebnis neben Ihrem Markdown, während Sie tippen. Das ist praktisch, um eine README, einen Blogentwurf, Entwicklerdokumentation oder Besprechungsnotizen vor der Veröffentlichung zu prüfen. Überschriften, Listen, Zitate und Codeblöcke funktionieren, ebenso die Erweiterungen von GitHub Flavored Markdown: Tabellen, Durchstreichen und Aufgabenlisten. Die Ausgabe wird vor der Anzeige immer bereinigt, sodass auch Text aus unbekannter Quelle kein Skript ausführen kann.
Anleitung
- Tippen oder fügen Sie Markdown in das linke Feld ein. Zu Beginn steht dort ein kurzes Beispiel, das Sie mit Leeren entfernen.
- Die Vorschau rechts aktualisiert sich kurz nachdem Sie aufhören zu tippen. Prüfen Sie Tabellenausrichtung und verschachtelte Listen mit eigenen Augen.
- Mit HTML kopieren landet das bereinigte HTML-Fragment in der Zwischenablage, bereit für einen Editor im HTML-Modus oder eine E-Mail-Vorlage.
- .md speichern lädt Ihren Originaltext herunter, .html speichern ein vollständiges HTML-Dokument mit einfachem Stylesheet. Der Dateiname wird aus Ihrer ersten Überschrift der ersten Ebene gebildet.
- Um später weiterzuarbeiten, schalten Sie die Entwurfsoption ein. Der Text wird nur in diesem Browser gespeichert.
So funktioniert es
- Parser: marked (MIT-Lizenz) wandelt Text nach der GFM-Spezifikation in HTML um. Wie im Standard wird ein einzelner Zeilenumbruch nur dann zum Umbruch, wenn die Zeile mit zwei Leerzeichen endet oder eine Leerzeile folgt.
- Bereinigung: DOMPurify (Apache-2.0 oder MPL-2.0, hier unter Apache-2.0 genutzt) säubert das HTML vor der Anzeige. Entfernt werden script-, iframe-, object-, form- und style-Tags, Event-Attribute, die mit on beginnen, style-Attribute sowie Links mit javascript:- oder data:-Adressen.
- Links: Verbleibende Links öffnen sich in einem neuen Tab mit rel=“noopener noreferrer”.
- Kontrollkästchen: Die Kästchen von Aufgabenlisten sind immer deaktiviert, die Vorschau ist also schreibgeschützt.
- Bilder: Bildadressen bleiben wie geschrieben. Ihr Browser fordert die Bilder direkt bei deren Servern an, und diese Server können die Anfrage sehen.
- Dateien: .md ist Ihr exakter Text in UTF-8. .html ist ein UTF-8-Dokument mit lang-Attribut und minimalem Stylesheet.
Beispiele
| Eingabe | Ergebnis |
|---|---|
**fett** |
fett |
~~weg~~ |
|
- [x] erledigt |
ein angehaktes Kästchen, gefolgt von „erledigt“ |
[Link](https://example.com) |
ein Link, der sich in einem neuen Tab öffnet |
[klick](javascript:alert(1)) |
die Adresse wird entfernt, nur der Text bleibt |
<script>alert(1)</script> |
nichts wird ausgeführt |
So sieht eine Tabelle aus. Die Doppelpunkte in der zweiten Zeile legen die Ausrichtung fest.
| Artikel | Menge |
|:---|---:|
| Apfel | 3 |Häufige Fragen
Wird mein Markdown an einen Server gesendet?
Nein. Rendern und Bereinigen finden in Ihrem Browser statt, nichts von Ihrer Eingabe wird hochgeladen. Der Text wird nur dann in diesem Browser gespeichert, wenn Sie die Entwurfsoption einschalten, und beim Ausschalten wieder gelöscht. Eine Einschränkung: Verweist Ihr Text auf ein externes Bild, lädt Ihr Browser dieses Bild direkt von seiner Adresse.
Wird ein script-Tag in meinem Text ausgeführt?
Nein. Das gerenderte HTML läuft vor der Anzeige immer durch DOMPurify. Dabei werden script-Tags, Event-Attribute wie onclick und onerror, javascript-Links, iframes, Formulare und style-Tags entfernt. Auch das kopierte oder heruntergeladene HTML ist die bereinigte Fassung.
Wie schreibe ich eine Tabelle oder eine Aufgabenliste?
Für eine Tabelle trennen Sie Spalten mit senkrechten Strichen und setzen unter die Kopfzeile eine Zeile aus Bindestrichen. Ein Doppelpunkt am linken Ende dieser Zeile bedeutet linksbündig, einer am rechten Ende rechtsbündig. Eine Aufgabenliste beginnt einen Listenpunkt mit - [ ] oder - [x]; die Vorschau zeigt schreibgeschützte Kontrollkästchen. Beides sind Funktionen von GitHub Flavored Markdown.
Sieht es genauso aus wie auf GitHub oder in meinem Blog?
Die Syntax wird gleich interpretiert, Schriften, Abstände und Farben legt aber jeder Dienst selbst fest. Prüfen Sie hier, ob Ihr Markdown so erkannt wird, wie Sie es beabsichtigt haben. Die heruntergeladene .html-Datei enthält nur ein einfaches, gut lesbares Stylesheet.
Wie lang darf die Eingabe sein?
Bis zu 500.000 Zeichen. Darüber pausiert die Vorschau und zeigt einen Hinweis; fügen Sie sehr lange Dokumente daher abschnittsweise ein.
