Markdown-Editor
Schreiben Sie Markdown und sehen Sie es mit Syntax-Highlighting in Echtzeit in der Vorschau.
0 Zeichen | 0 Wörter
Schreiben Sie Markdown und sehen Sie es mit Syntax-Highlighting in Echtzeit in der Vorschau.
Der linke Bereich ist eine einfache Textarea. Bei jedem Eingabeereignis wartet der Editor 150 Millisekunden und schickt dann das rohe Markdown durch marked.parse(text, { breaks: true, gfm: true }). GitHub Flavored Markdown ist aktiviert, und einzelne Zeilenumbrüche werden durch die Option breaks zu Zeilenumbrüchen. Die resultierende HTML-Zeichenkette läuft anschließend durch DOMPurify mit einer bestimmten Sperrliste, bevor sie den Vorschaubereich erreicht.
Der Sanitizer verbietet fünf Tags — form, input, button, select und textarea — und entfernt vier Event-Handler-Attribute: onerror, onclick, onload und onmouseover. Alles andere im Markdown, einschließlich rohem HTML, das Sie einfügen, wird zuerst geparst und danach bereinigt. Der rechte Bereich zeigt das bereinigte Ergebnis, und die Symbolleiste wird beim Tippen live neu gerendert.
| Sie tippen | Sie erhalten | Grund |
|---|---|---|
# Hello | <h1>Hello</h1> | Standard-ATX-Überschrift |
**bold** and *italic* | <p><strong>bold</strong> and <em>italic</em></p> | Inline-Hervorhebung |
- [x] done | Ein Listeneintrag „done“, ohne Kontrollkästchen | Das Tag input ist verboten |
<img src=x onerror=alert(1)> | <img src="x"> | onerror wird entfernt, das Tag bleibt |
<script>alert(1)</script> | Nichts wird gerendert | Das Skript wird vom Sanitizer entfernt |
Zeichen- und Wortzählung verwenden den rohen Quelltext, nicht die gerenderte Ausgabe. Die Zeichenkette # Hello world meldet 13 Zeichen und 3 Wörter, weil #, Hello und world jeweils gezählt werden. Der Wortzähler entfernt führende und nachfolgende Leerzeichen und teilt an Leerraumfolgen, sodass leere Zeilen die Summe nicht aufblähen.
Das Flag gfm: true aktiviert Tabellen, umzäunte Codeblöcke, Durchstreichen, Autolinks und Aufgabenlisten. Überschriften, Blockzitate, verschachtelte Listen, Inline-Code, Links und Bilder funktionieren. Rohes, in das Markdown eingebettetes HTML ist nur erlaubt, wenn es den DOMPurify-Durchlauf übersteht, daher werden <details>, <summary> und <br> gerendert, Formulare und interaktive Steuerelemente dagegen nicht. Umzäunte Codeblöcke erhalten nur dann Syntaxhervorhebung, wenn ein Highlighter (hljs) auf der Seite verfügbar ist; andernfalls werden sie als einfache Monospace-Blöcke dargestellt.
Es wird nur ein Dokument gespeichert. Der Schlüssel onlinehandytools-markdown-editor hält eine einzelne Zeichenkette, sodass ein Projektwechsel den vorherigen Entwurf ohne Warnung überschreibt. Es gibt keinen Verlauf über das native Rückgängig der Textarea hinaus, keine Versionierung, keinen Dateiimport und keine gemeinsame Bearbeitung. Das exportierte HTML hat eine feste, eingebaute Gestaltung; es ist überall lesbar, passt aber nicht zu einem bestimmten Designsystem. „Copy HTML“ legt das bereinigte Fragment in die Zwischenablage, kein vollständiges Dokument. Da DOMPurify nach marked angewendet wird, verliert jede Markdown-Erweiterung, die auf verbotene Tags angewiesen ist, stillschweigend ihre Funktion, statt einen Fehler zu melden.
Der HTML-Export schreibt eine vollständige Seite mit UTF-8-Zeichensatz, einem Viewport-Meta-Tag und eingebettetem CSS für Überschriften, Code, Tabellen und Blockzitate. Der Markdown-Export schreibt den rohen Quelltext Byte für Byte. Dateinamen stammen aus den Oberflächen-Strings und nicht aus einem Namensfeld, sodass wiederholte Exporte einander überschreiben, sofern Ihr Browser sie nicht umbenennt.
| Aktion | Ausgabe | Am besten für |
|---|---|---|
| HTML exportieren | Eine vollständige Seite mit eingebettetem CSS | Teilen einer eigenständigen, in sich geschlossenen Vorschau |
| MD exportieren | Den rohen Markdown-Quelltext | Einchecken in ein Repository oder einen Static-Site-Generator |
| HTML kopieren | Das bereinigte HTML-Fragment | Einfügen in ein CMS-Feld, das Rich Text akzeptiert |
Der HTML-Export ist einseitig: Überschriften, Links, Tabellen und Codeblöcke werden übernommen, die Bearbeitbarkeit jedoch nicht, behandeln Sie daher die Markdown-Quelle als Master. Beachten Sie, dass die exportierte Seite die Syntaxhervorhebung der Vorschau nicht enthält — sie liefert den Code als Klartext in einem gestalteten pre-Block, weil der Highlighter ein Seitenskript und nicht Teil des Serialisierers ist. Die Zwischenablage-Option ist am besten, wenn ein CMS gerendertes HTML akzeptiert und Sie Formatierung ohne Dateidownload wünschen. Keine der drei Optionen bettet Bilder als Data-URIs ein, daher hängt eine geteilte HTML-Datei weiterhin von den ursprünglichen Bild-Hosts ab, um sie anzuzeigen.
Halten Sie oben eine README-artige erste Überschrift (# Project Name), damit die exportierte Datei einen klaren Titel hat. Verwenden Sie Tabellen für Vergleichsdaten und umzäunte Codeblöcke mit Sprach-Tag für die Hervorhebung. Bevor Sie veröffentlichen, fügen Sie das rohe Markdown in einen Diff-Checker ein, um Änderungen zu prüfen, ohne die gerenderte Vorschau zu lesen. Wenn Sie ein garantiertes Speichern benötigen, kopieren Sie das rohe Markdown manuell, statt sich auf das 5-Sekunden-Fenster des automatischen Speicherns zu verlassen.
Achten Sie auf die Reihenfolge der Operationen: Erst parst marked den Text, dann filtert DOMPurify das Ergebnis. Das bedeutet, dass ein Markdown-Konstrukt, das intern auf ein verbotenes Tag angewiesen ist, nicht als Fehler erscheint, sondern einfach leer oder unvollständig rendert. Prüfen Sie solche Fälle immer in der Vorschau und nicht nur im Quelltext. Für Screenshots und Abgleiche empfiehlt es sich, den Markdown-Quelltext in einer Monospace-Schrift vorzubereiten, damit Einrückungen bei Listen und Codeblöcken sichtbar bleiben. Wenn Sie dieselbe Datei an mehrere Empfänger geben, benennen Sie den Export vor dem Versenden um, weil die Vorgabe-Dateinamen sonst kollidieren.
Marked rendert Aufgabenlisten als input-Elemente, aber DOMPurify ist so konfiguriert, dass form, input, button, select und textarea verboten sind. Die Kästchen werden entfernt, übrig bleibt der Listentext ohne Kontrollkästchen.
Ja. Die Zählung teilt den rohen Editor-Text an Leerzeichen, also zählt „# Report“ als zwei Wörter und ein fettes „**title**“ als eines. Entfernen Sie die Syntax zuerst, wenn Sie nur den Fließtext zählen wollen.
Nein. Das automatische Speichern schreibt in einen einzigen localStorage-Schlüssel, sodass ein zweites Dokument das erste überschreibt. Exportieren Sie den aktuellen Entwurf, bevor Sie ein neues beginnen.
Ja. Sie enthält das gerenderte Markup und ein kleines eingebettetes Stylesheet für Überschriften, Codeblöcke, Tabellen und Blockzitate, sodass sie ohne Editor und ohne externes CSS korrekt geöffnet wird.
Das automatische Speichern läuft alle 5 Sekunden per Timer, nicht bei jedem Tastendruck. Änderungen in den letzten Sekunden vor dem Schließen können verloren gehen; lösen Sie bei knappem Timing manuell Kopieren oder Export aus.
Es gibt kein Import-Bedienelement. Fügen Sie das Markdown stattdessen in den linken Bereich ein; der Export ist einseitig, als HTML, rohes Markdown oder HTML in der Zwischenablage.
Geprüft vom HandyTools-Hub-Team · Zuletzt aktualisiert