Markdown Editor online mit Vorschau

Ein Markdown Editor mit Vorschau in Echtzeit

Dieser Markdown Editor online zeigt links Ihren Text und rechts das fertige Ergebnis, das sich beim Tippen aktualisiert. Auf dem Smartphone liegen beide Bereiche untereinander, und zwei Reiter, „Schreiben“ und „Vorschau“, wechseln zwischen ihnen. Gleichzeitig können Sie damit Markdown in HTML umwandeln: Der Code lässt sich mit einem Klick kopieren oder als vollständige Webseite herunterladen.

Alles läuft in Ihrem Browser. Der Text wird nirgendwohin hochgeladen, und auf Ihrem Gerät bleibt ein Entwurf gespeichert. Schließen Sie den Tab, ist das Dokument beim nächsten Besuch wieder da.

Was ist Markdown?

Markdown ist eine Art, Text mit gewöhnlichen Tastaturzeichen zu formatieren. Eine Raute vor einer Zeile macht sie zur Überschrift, zwei Sternchen um ein Wort setzen es fett. Die Datei bleibt als reiner Text gut lesbar und lässt sich anschließend in HTML für das Web umwandeln. Die übliche Dateiendung ist .md.

Die wichtigste Syntax

Für einen Zeilenumbruch innerhalb eines Absatzes beenden Sie die Zeile mit zwei Leerzeichen oder einem Backslash. Eine Leerzeile trennt zwei Absätze. Listen verschachteln Sie, indem Sie die Punkte um zwei oder drei Leerzeichen einrücken.

Gängige Erweiterungen

• Tabellen: Spalten mit | getrennt und eine Zeile aus Bindestrichen unter dem Kopf. :--- richtet links aus, :---: zentriert, ---: richtet rechts aus, praktisch für eine Betragsspalte wie 85,40 €.
• Aufgabenlisten: - [ ] Milch ergibt ein leeres Kästchen, - [x] Brot ein abgehaktes.
• Durchgestrichen: ~~alter Preis~~.
• Automatische Links: Eine Adresse, die mit https:// oder www. beginnt, wird ohne weiteres Zutun zum Link.

So funktioniert der Editor

1. Schreiben oder fügen Sie Text in „Markdown-Text“ ein, oder klicken Sie auf „.md-Datei öffnen“. Sie können eine Datei auch in das Textfeld ziehen.
2. Formatieren Sie mit der Werkzeugleiste: fett, kursiv, Überschrift, Link, Liste, Code, Tabelle und Zitat. Tastenkürzel: Strg+B, Strg+I und Strg+K (Cmd am Mac).
3. Die Schaltfläche „Inhaltsverzeichnis“ listet Ihre Überschriften auf. Ein Klick springt zum Abschnitt, „In den Text einfügen“ setzt ein verlinktes Verzeichnis in Ihr Dokument.
4. Exportieren Sie mit „HTML kopieren“, „.html herunterladen“ (eine vollständige Seite mit schlichtem Layout) oder „.md herunterladen“.

Unter dem Editor zeigt ein Zähler die Wörter und die Lesezeit, berechnet mit 230 Wörtern pro Minute: Ein Blogartikel mit 920 Wörtern braucht 4 Min. Lesezeit, eine Hausarbeit mit 1.000 Wörtern 5 Min. Das synchrone Scrollen hält die Vorschau ungefähr auf Höhe der Stelle, die Sie gerade bearbeiten.

Wofür man Markdown nutzt

Markdown ist verbreitet für technische Dokumentation und README-Dateien zu Software, für Notizen, Beiträge in Foren und in Messengern, die es unterstützen, sowie für Blogentwürfe. Ein Besprechungsprotokoll, ein Lernzettel fürs Abitur oder die Wochenliste mit Aufgaben sind schnell geschrieben, ohne die Hände von der Tastatur zu nehmen.

Markdown sicher in HTML umwandeln

Die Umwandlung folgt CommonMark, der maßgeblichen Spezifikation für Markdown, ergänzt um die genannten Erweiterungen. Rohes HTML im Text wird standardmäßig nicht ausgeführt, sondern als Text angezeigt. Mit „Rohes HTML anzeigen (bereinigt)“ werden gängige Tags dargestellt, ein Filter entfernt aber immer Skripte, Attribute wie onclick oder onerror und javascript:-Links. Das kopierte oder heruntergeladene HTML ist derselbe bereinigte Code wie in der Vorschau.

Häufige Fragen

Wird mein Text an einen Server geschickt?

Nein. Die Umwandlung geschieht in Ihrem Browser, und der Entwurf bleibt auf Ihrem Gerät. Wenn Sie die Browserdaten löschen, ist auch der Entwurf weg: Laden Sie die .md-Datei herunter, um ihn zu behalten.

Warum erscheint mein Zeilenumbruch nicht?

In Markdown wird ein einfacher Zeilenumbruch in den Absatz übernommen. Lassen Sie eine Leerzeile für einen neuen Absatz, oder beenden Sie die Zeile mit zwei Leerzeichen für einen Umbruch.

Kann ich das HTML in meine Website einfügen?

Ja. „HTML kopieren“ liefert nur den Inhalt, bereit für eine Vorlage oder einen Seiteneditor. „.html herunterladen“ erstellt eine eigenständige Seite, die jeder Browser öffnet.

Warum fehlen meine Bilder in der Vorschau?

Ein Bild mit relativem Pfad wie foto.jpg gibt es auf dieser Seite nicht. Geben Sie die vollständige Adresse mit https:// an, damit es in der Vorschau erscheint.