Markdown-Editor mit Live-Vorschau - HTML exportieren
Markdown-Editor und Vorschau
Rohes HTML im Quelltext wird in der Vorschau als Text angezeigt; Links mit javascript: oder data: sind deaktiviert.
So schreibt man Markdown
Markdown ist Klartext mit ein paar Zeichenkonventionen: eine Raute für eine Überschrift, Sternchen für Hervorhebung, ein Bindestrich für einen Listenpunkt. READMEs, Wikis, Issue-Tracker und die meisten Notiz-Apps verstehen es. Dieser Editor rendert deinen Text beim Tippen, sodass du die Struktur entstehen siehst, und exportiert sauberes HTML, wenn du fertig bist.
Schritte
- 1 Tippe oder füge Markdown in das linke Feld ein. Die Vorschau rechts aktualisiert sich bei jedem Tastendruck.
- 2 Nutze das Beispiel als Spickzettel: Überschriften, fett und kursiv, Listen, ein Codeblock, eine Tabelle, ein Zitat und ein Link sind alle enthalten.
- 3 Kopiere das HTML für ein CMS oder Template, oder lade das Dokument als .md oder als eigenständige .html-Datei herunter.
Die Syntax in einer Minute
Überschriften: # Titel, ## Abschnitt, ### Unterabschnitt. Hervorhebung: **fett**, *kursiv*, ~~durchgestrichen~~. Listen: Zeilen mit - oder 1. beginnen; zwei Leerzeichen Einzug zum Verschachteln. Links: [Text](https://example.com); Bilder: . Inline-Code steht in `Backticks`; ein Codeblock wird von drei Backticks eingerahmt, optional gefolgt vom Sprachnamen. Eine Zeile --- zeichnet eine Linie, und eine Zeile, die mit einem Größer-als-Zeichen beginnt, ist ein Zitat.
Tabellen
Eine Tabelle besteht aus Kopfzeile, Trennzeile und Datenzeilen, die Zellen durch senkrechte Striche getrennt: | Name | Preis |. Die Trennzeile besteht aus Bindestrichen, ein Doppelpunkt am Rand legt die Ausrichtung fest — :--- links, :---: zentriert, ---: rechts. Die Spalten müssen im Quelltext nicht bündig sein; der Renderer kümmert sich um die Abstände.
Was der HTML-Export enthält
HTML kopieren liefert nur das Markup des Inhalts — Absätze, Überschriften, Listen und Tabellen — bereit zum Einfügen in eine Seite mit eigenen Stilen. .html herunterladen verpackt dieses Markup in ein vollständiges Dokument mit einem Titel aus deiner ersten Überschrift und einem kleinen Stylesheet, sodass die Datei in jedem Browser lesbar öffnet.
Warum rohes HTML nicht gerendert wird
Standard-Markdown reicht HTML unverändert durch — praktisch, aber damit wird jedes eingefügte Dokument zu einem Weg, Skripte auf der Seite auszuführen. Diese Vorschau maskiert es stattdessen: ein div- oder script-Tag im Quelltext erscheint als Text. Links mit den Schemata javascript: und data: sind aus demselben Grund deaktiviert. Deine exportierte Datei ist ebenso frei von eingeschleustem Code.