Markdown-Editor
Was ist Markdown?
Markdown ist eine leichtgewichtige Auszeichnungssprache, mit der strukturierte Inhalte in gut lesbarem Klartext geschrieben werden. Überschriften, Listen, Links, Bilder, Zitate, Codeblöcke und Tabellen lassen sich mit einfachen Zeichen notieren und später in HTML oder andere Formate umwandeln. Ein Markdown-Editor hilft, Text und Vorschau nebeneinander zu prüfen, Formatierungsfehler zu erkennen und Inhalte schneller für README-Dateien, Dokumentation, Blogbeiträge, Notizen, Wissensdatenbanken und Produkttexte vorzubereiten. Markdown bleibt bewusst einfach, aber verschiedene Plattformen unterstützen unterschiedliche Erweiterungen wie GitHub-Flavored Markdown, Frontmatter oder Mermaid. Deshalb sollte die endgültige Darstellung immer im Zielsystem kontrolliert werden. Bei gemeinsamer Nutzung sollten Eingaben, Annahmen und gewünschtes Ergebnis vorher klar sein, damit die Ausgabe nicht falsch interpretiert wird.
Anleitung
So wird es verwendet
- Gib Markdown-Text in den linken Editor ein
- Das rechte Feld zeigt eine Echtzeit-Vorschau
- Verwende die Symbolleisten-Schaltflächen, um gängige Syntax einzufügen
- Die untere Leiste zeigt Wort-, Zeichen- und Zeilenanzahl an
- Der Inhalt wird automatisch im lokalen Speicher des Browsers gesichert
Funktionen
Bearbeitungstipps
- Die Vorschau-Darstellung kann je nach Plattform variieren – überprüfe die endgültige Ausgabe im Zielsystem, wenn du Tabellen, HTML oder erweiterte Markdown-Funktionen verwendest.
- Das automatische Speichern ist beim Entwurf hilfreich, aber bewahre eine separate Kopie für wichtige Notizen auf, bevor du Browserdaten löschst oder das Gerät wechselst.
Anwendungsfälle
Technisches Prinzip
Die Markdown-Rendering hat in der Regel drei Schritte: Ein Tokenizer zerlegt den Text in syntaktische Einheiten wie Überschriften, Absätze, Listen und Codeblöcke; ein Parser wandelt den Tokenstrom gemäß den Grammatikregeln in einen abstrakten Syntaxbaum (AST) um; ein Renderer durchläuft den AST und gibt das passende HTML aus. Gängige JavaScript-Bibliotheken sind marked, markdown-it, remark und micromark – sie unterscheiden sich in Bundle-Größe, Geschwindigkeit und Erweiterbarkeit, folgen aber alle der CommonMark-Spezifikation. CommonMark hat die Mehrdeutigkeiten der ursprünglichen Markdown-Grammatik beseitigt (z. B. wie verschachtelte Listen eingerückt werden, wie die Grenze von Inline-Code gefunden wird), sodass verschiedene Implementierungen dasselbe Ergebnis rendern. Aufbauend auf CommonMark hat GitHub GFM (GitHub Flavored Markdown) hinzugefügt, das Tabellen, Aufgabenlisten (- [ ]), Durchgestrichen (~~), Auto-Links und Fenced Code Blocks ergänzt; GFM ist heute der De-facto-Standard, und die meisten modernen Markdown-Tools aktivieren es standardmäßig. Die Syntaxhervorhebung in Codeblöcken erfolgt in der Regel durch highlight.js oder Prism.js, die das Sprach-Tag beim Rendern erkennen und Schlüsselwörter, Zeichenketten und Kommentare mit CSS-Klassen versehen, die ein Thema farbig gestaltet. Um zu verhindern, dass benutzereigenes HTML XSS auslöst, leiten Renderer die Ausgabe in der Regel durch DOMPurify oder einen ähnlichen Allowlist-Filter, der script-, iframe- und on*-Ereignisattribute entfernt – sodass das Einfügen von fremden Markdown kein bösartiges Skript ausführen kann.
- Parsing-Ablauf: Rohtext durchläuft Tokenizer -> Parser -> Renderer und wird zu HTML, wobei AST die Zwischendarstellung ist.
- Standards: CommonMark ist die offizielle Grammatik; GFM erweitert sie um Tabellen, Aufgabenlisten, Durchgestrichen, Fenced Code Blocks und Auto-Links.
- Bibliotheksvergleich: marked ist klein und schnell, markdown-it hat ein reichhaltiges Plugin-Ökosystem, und remark basiert auf dem unified-Ökosystem und eignet sich für Dokumentverarbeitungs-Pipelines.
- Syntaxhervorhebung: highlight.js oder Prism.js lesen das Sprach-Tag des Codeblocks beim Parsen und versehen Schlüsselwörter, Zeichenketten und Kommentare mit CSS-Klassen.
- XSS-Schutz: Bibliotheken wie DOMPurify filtern die HTML-Ausgabe gegen eine Allowlist und entfernen script-, iframe- und on*-Ereignisattribute, um Skriptinjection zu verhindern.
- Live-Vorschau: Der Editor hört auf Eingabeereignisse, entprellt jede Änderung, parsed neu und aktualisiert das rechte DOM über Diff, um Responsivität und Performance auszugleichen.
Beispiele
Überschriften, Listen und Codeblöcke
# Überschrift 1
## Überschrift 2
- Listeneintrag A
- Listeneintrag B
- Verschachtelter Listeneintrag
```javascript
function hello() {
console.log('Hello Markdown');
}
```Tabellen
| Tool | Typ | Größe |
|---------|--------|-------|
| Vite | Build | Klein |
| Webpack | Build | Groß |
| Rollup | Bundle | Mittel|Zitate und Links
> "Markdown lässt das Schreiben zum Inhalt selbst zurückkehren."
> -- John Gruber
Referenz: [CommonMark Spec](https://commonmark.org)FAQ
Welche Markdown-Variante wird unterstützt?
Die meisten Implementierungen verwenden CommonMark plus die Erweiterungen von GitHub Flavored Markdown: Tabellen, Durchstreichen, Aufgabenlisten, Codeblöcke mit Sprachhinweisen. Manche enthalten MathJax/KaTeX für $math$-Blöcke und Mermaid für Diagramme. Schau in der Toolbar nach, was verfügbar ist.
Wird das Dokument hochgeladen?
Nein. Das Parsen und Rendern von Markdown geschieht in deinem Browser über eine JS-Bibliothek (typischerweise markdown-it oder remark). Dein Entwurf verlässt das Gerät nie.
Wie funktioniert die Live-Vorschau?
Während du tippst, wird der Quellbereich geparst und als HTML im Vorschaubereich gerendert. Synchronisiertes Scrollen hält beide Bereiche durch Abgleich der Absatzpositionen aufeinander abgestimmt. Die meisten Versionen unterstützen auch Vollbild- und Nebeneinander-Modus.
Kann ich das Dokument exportieren?
Ja - lade als .md (Rohquelle), HTML (gerendert, einbettbar in eine Webseite) oder PDF (über die Druckfunktion des Browsers). Die PDF-Ausgabe behält Überschriften, Listen, Codeblöcke und eingebettete Bilder bei. Für pixelgenaue PDFs kopiere das HTML in eine echte Textverarbeitung.
Speichert es meinen Entwurf, wenn ich den Tab schließe?
Die meisten Versionen speichern automatisch im localStorage, sodass beim erneuten Öffnen im selben Browser der Entwurf wiederhergestellt wird. Schließen eines Inkognito-Fensters oder das Löschen von Website-Daten entfernt ihn. Für echte Persistenz exportiere die .md-Datei regelmäßig in dein Dateisystem oder Git-Repository.
Werden eingefügte Bilder hochgeladen?
Manche Editoren speichern eingefügte Bilder inline als Base64 (sichtbar im Markdown-Quelltext). Andere laden sie zu einem Bildhoster hoch - prüfe das Verhalten der Seite. Wenn dir Privatsphäre wichtig ist, speichere Bilder zuerst im Dateisystem und referenziere sie über relative Pfade.
Kann ich Tabellen, Mathe oder Diagramme einfügen?
GitHub-Flavored-Markdown-Tabellen (| col1 | col2 |) funktionieren überall. Mathe-Blöcke ($x^2$) und Mermaid-Diagramme (```mermaid) brauchen explizite Unterstützung; schau in der Toolbar nach Schaltflächen. Wo unterstützt, rendert die Vorschau sie live.