Markdown Editor: Schreiben & Live-Vorschau
Markdown-Editor mit Live-Vorschau, Syntaxhervorhebung und HTML-Export. Dokumentation und READMEs direkt im Browser schreiben – ohne Anmeldung oder Installation.
Was ist der Markdown Editor?
Der Markdown Editor ist eine kostenlose Online-Schreibumgebung, die eine Live-Vorschau deines Markdowns während des Tippens rendert. Editor und Vorschau stehen nebeneinander: Links tippen, rechts die formatierte Ausgabe sehen – sofort, ohne Seitenaktualisierung. Er verarbeitet alles von Überschriften und Fettdruck bis hin zu Fenced Code Blocks, Tabellen und Blockzitaten.
Das Tool richtet sich an Entwickler, die READMEs, technische Dokumentationen, Blog-Entwürfe und Release Notes schreiben – überall dort, wo Markdown das Autorenformat ist. Statt Änderungen in ein Repository zu pushen und auf eine Vorschau-Rendierung zu warten oder ein lokales Editor-Plugin zu installieren, erhältst du eine genaue gerenderte Vorschau im Browser. Wenn du fertig bist, exportiere die Datei als .md-Datei für die Versionsverwaltung oder als vollständige, stilisierte .html-Datei, die als Webseite bereit ist. Kein Konto, kein Server-Upload, keine Konfiguration.
Hauptfunktionen
- Live Markdown-Vorschau — Betrieben von
@uiw/react-md-editor, rendert der Editor die Vorschau in Echtzeit mit derselben Markdown-Verarbeitung, die die Bibliothek mitliefert. Änderungen erscheinen in der Vorschau, sobald du aufhörst, ein Zeichen einzugeben. - Syntaxhervorhebung — Fenced Code Blocks (
javascript,python, usw.) werden mit syntaxfarbiger Ausgabe im Vorschaubereich gerendert. Die eigene Roh-Markdown-Ansicht des Editors wendet ebenfalls Syntaxfärbung an, um Überschriften, Links, Fettdruck und Code-Spans zu unterscheiden. - Export nach HTML — „HTML herunterladen" erzeugt ein vollständiges
<!DOCTYPE html>-Dokument mit eingebetteten CSS-Stilen für Body-Schrift, Code-Blocks, Blockzitate und Tabellen. Die Datei wird alsdocument.htmlheruntergeladen und öffnet sich in jedem Browser ohne externe Abhängigkeiten. - Als .md-Datei herunterladen — „MD herunterladen" speichert den rohen Markdown-Quellcode als
document.md, bereit zum Committen in ein Repository oder zum Anhängen an ein Ticket. - Markdown kopieren — Kopiert den rohen Markdown-Text in die Zwischenablage zum Einfügen in GitHub, GitLab, Confluence, Notion oder jedes Markdown-fähige Eingabefeld.
- HTML kopieren — Kopiert das gerenderte innere HTML aus dem Vorschaubereich. Nützlich, wenn du formatierten Inhalt in einen Rich-Text-Editor einfügen musst, der HTML akzeptiert.
- Allgemeine Formatierungsleiste — Die
@uiw/react-md-editor-Symbolleiste bietet Schaltflächen für Fett, Kursiv, Überschriften, Listen, Links, Bilder, Code und mehr. Kein Auswendiglernen von Tastaturkürzeln erforderlich. - Schnellreferenz-Panel — Ein Syntax-Spickzettel unterhalb des Editors deckt die neun am häufigsten verwendeten Markdown-Konstrukte ab: Überschriften, Fett, Kursiv, Links, Bilder, Inline-Code, Listen, Blockzitate und Fenced Code Blocks.
So verwendest du den Markdown Editor
Schritt 1: Schreiben beginnen oder Inhalt laden
Wenn die Seite lädt, enthält der Editor ein Beispieldokument mit Überschriften, Fett- und Kursivtext, einer ungeordneten Liste, einem Fenced JavaScript Code Block, einer Tabelle, einem Blockzitat und einem Link. Der Vorschaubereich rechts zeigt die gerenderte Ausgabe dieses Beispiels.
Leere den Editor, indem du in der Aktionsleiste auf die Schaltfläche „Leeren" klickst, oder wähle einfach alles aus und beginne zu tippen. Die Editor-Höhe ist auf 600px festgelegt, mit aktiviertem vertikalen Scrollen für längere Dokumente.
Schritt 2: Markdown mit der Symbolleiste oder Tastatur schreiben
Die Symbolleiste oben im Editor enthält Schaltflächen für die gängigsten Formatierungsoperationen. Klicke auf B, um den ausgewählten Text in doppelte Sternchen für Fettdruck einzuschließen, oder klicke auf I, um ihn in einzelne Sternchen für Kursiv einzuschließen. Überschriften-Schaltflächen fügen #, ## oder ###-Präfixe ein. Code-Fence-Schaltflächen fügen einen Triple-Backtick-Block mit einem Sprach-Platzhalter ein.
Für Fenced Code Blocks mit Syntaxhervorhebung schreibe:
def greet(name: str) -> str: return f"Hello, {name}!"
print(greet("world"))
Die Vorschau rendert dies als farbigen Code-Block. Das Schnellreferenz-Panel am unteren Rand der Seite zeigt alle neun Syntaxmuster auf einen Blick.
Schritt 3: Gerenderte Ausgabe im Vorschaubereich überprüfen
Der rechte Bereich aktualisiert sich beim Tippen. Scrolle ihn unabhängig vom Editor, um das vollständige Dokument zu überprüfen. Das Attribut data-color-mode="auto" bedeutet, dass sich Editor und Vorschau automatisch an die Hell- oder Dunkelmodus-Einstellung deines Betriebssystems anpassen.
Überprüfe:
- Tabellen rendern mit Rahmen und alternierender Header-Stilisierung
- Links sind anklickbar (sie verwenden
href-Attribute im gerenderten HTML) - Code-Blocks haben die korrekten Syntaxfarben für die angegebene Sprache
- Bilder werden angezeigt (wenn du öffentlich zugängliche Bild-URLs referenziert hast)
Schritt 4: Dokument exportieren
Wähle den Export, der deinem Anwendungsfall entspricht:
- Markdown kopieren — füge den rohen Quellcode in GitHub PR-Beschreibungen, Jira-Kommentare, Notion-Seiten oder jedes Markdown-Feld ein
- HTML kopieren — füge das gerenderte Markup in Rich-Text-Editoren ein, die HTML-Eingaben akzeptieren
- MD herunterladen — speichert
document.mdin deinen Download-Ordner - HTML herunterladen — speichert
document.htmlmit eingebetteten Stilen, bereit zum Hosten als statische Webseite
Das exportierte HTML-Dokument enthält einen <style>-Block mit sinnvollen Standardwerten: System-Font-Stack, max-width: 800px zentriertes Layout, Code-Hintergrund #f4f4f4, Blockzitat-Linksrand und vollbreite Tabelle mit Rahmen-Zellen.
Schritt 5: Frühere Arbeit mit dem Verlauf wiederherstellen
Premium-Unterstützer können das Verlaufs-Panel unter dem Editor verwenden, um zuvor automatisch gespeicherte Dokumente wiederherzustellen. Nicht-Premium-Benutzer sollten ihre Arbeit kopieren oder herunterladen, bevor sie die Seite verlassen, da der Editor-Inhalt nicht über Sitzungen hinweg gespeichert wird.
Praktische Beispiele
Ein Projekt-README schreiben
Ein Entwickler erstellt ein README für ein neues CLI-Tool. Er schreibt:
# my-cli
A command-line tool for batch file renaming.
## Installation
npm install -g my-cli
## Usage
my-cli --pattern "*.log" --prefix "archive-"
## Options
| Flag | Description | Default |
|------|-------------|---------|
| `--pattern` | Glob pattern for matching files | `*` |
| `--prefix` | String prepended to filenames | `""` |
| `--dry-run` | Preview changes without renaming | `false` |Die Live-Vorschau zeigt die Tabelle mit Spaltenüberschriften, die Bash-Code-Blocks mit Syntaxhervorhebung und die Überschriftenhierarchie. Er klickt auf „MD herunterladen", um die Datei direkt in sein Projektstammverzeichnis zu speichern.
Eine stilisierte HTML-Seite aus Dokumentation erstellen
Ein technischer Redakteur hat ein Markdown-Dokument, das einen API-Endpunkt beschreibt. Er fügt den Inhalt ein, überprüft die Vorschau und klickt dann auf „HTML herunterladen". Das resultierende document.html enthält eingebettetes CSS und wird korrekt dargestellt, wenn es in einem Browser geöffnet oder als E-Mail-Anhang gesendet wird – kein externes Stylesheet erforderlich.
Einen Release-Changelog entwerfen
Ein Entwickler, der einen 2.4.0-Changelog schreibt, verwendet den Editor, um das Dokument mit ##-Überschriften für „Breaking Changes", „New Features" und „Bug Fixes" zu strukturieren, mit ungeordneten Listen darunter. Er klickt auf „HTML kopieren", um den formatierten Inhalt direkt in das Release-Management-Tool seines Unternehmens einzufügen, das Rich-HTML-Eingaben akzeptiert.
Tipps und Best Practices
Die Symbolleiste fügt Formatierungen um ausgewählten Text ein. Wähle ein Wort aus und klicke auf die Fett-Schaltfläche; die Auswahl wird zu Wort. Wenn nichts ausgewählt ist, fügt die Schaltfläche einen Platzhalter wie bold text am Cursor ein.
Fenced Code Blocks benötigen einen Sprachbezeichner für die Syntaxhervorhebung. Ein leerer ` -Block rendert als einfacher Monospace-Text. Hänge den Sprachnamen unmittelbar nach den öffnenden Backticks an ( `typescript , `sql , `yaml ), um farbige Ausgabe zu erhalten.
HTML kopieren erfasst das innere HTML der Live-Vorschau. Die Funktion handleCopyHtml liest document.querySelector('.w-md-editor-preview')?.innerHTML. Wenn die Vorschau noch nicht gerendert wurde (zum Beispiel unmittelbar nach dem Laden der Seite), kann das kopierte HTML leer sein. Warte, bis sich die Vorschau gefüllt hat, bevor du auf „HTML kopieren" klickst.
Heruntergeladenes HTML ist eigenständig. Die Datei document.html enthält alle notwendigen Stile inline. Du kannst sie per E-Mail senden, auf einem statischen Dateiserver hosten oder einem Ticket anhängen, ohne zusätzliche Assets.
Leeren fragt nicht nach Bestätigung. Ein Klick auf „Leeren" leert den Editor sofort. Wenn du ungespeicherte Arbeit hast, lade oder kopiere sie zuerst.
Häufige Probleme und Fehlerbehebung
„Der Editor zeigt einen Lade-Spinner." Die @uiw/react-md-editor-Komponente wird lazy-geladen, um Server-seitige Rendering-Probleme zu vermeiden. Der Spinner erscheint kurz, während das Editor-Bundle lädt. Er sollte bei normaler Verbindung innerhalb von ein oder zwei Sekunden verschwinden.
„HTML kopieren hat leere Ausgabe erzeugt." Die Funktion liest das innerHTML des Vorschau-Containers. Wenn die Vorschau noch nicht gerendert wurde (ungewöhnlich, aber möglich bei sehr langsamen Verbindungen), kann dies eine leere Zeichenkette zurückgeben. Scrolle den Vorschaubereich, um ein Rendering auszulösen, und versuche es erneut.
„Meine Tabelle wird nicht gerendert." Markdown-Tabellen benötigen eine Trennzeilen-Zeile mit Bindestrichen zwischen der Kopfzeile und den Datenzeilen: |------|------|. Stelle sicher, dass jede Zelle in der Kopfzeile eine entsprechende Trennzelle hat. Führende und abschließende Pipe-Zeichen (|) sind optional, werden aber aus Konsistenzgründen empfohlen.
„Fenced Code hat keine Syntaxhervorhebung." Überprüfe, ob der Sprachbezeichner auf derselben Zeile wie die öffnenden Backticks steht, ohne Leerzeichen: `javascript nicht ` javascript . Bestätige auch, dass der Sprachname kleingeschrieben und korrekt buchstabiert ist (python, nicht Python).
„Heruntergeladene MD-Datei hat auf macOS keine Erweiterung." macOS entfernt manchmal die .md-Erweiterung für Dateien, die es nicht als Standardtyp erkennt. Benenne die Datei nach dem Herunterladen um und füge .md hinzu, oder konfiguriere deinen Browser so, dass er immer fragt, wo Downloads gespeichert werden sollen.
Datenschutz und Sicherheit
Alle Markdown-Renderingoperationen, HTML-Konvertierungen und Datei-Exporte finden vollständig in deinem Browser statt. Kein Inhalt, den du tippst, wird an Glyph Widgets-Server oder Dritte übertragen. Der Editor funktioniert offline, sobald die Seite geladen wurde. Dies macht ihn sicher für interne Dokumentation, proprietäre technische Spezifikationen und Entwürfe mit vertraulichen Projektdetails.
Häufig gestellte Fragen
Ist der Markdown Editor kostenlos? Ja, vollständig kostenlos ohne Nutzungsbeschränkungen. Es ist keine Registrierung, kein Abonnement oder Zahlung jeglicher Art erforderlich.
Funktioniert er offline? Sobald die Seite geladen und das Editor-Bundle initialisiert ist, funktionieren alle Schreib-, Vorschau- und Exportfunktionen ohne Netzwerkverbindung.
Sind meine Daten sicher? Alles, was du tippst, bleibt im Arbeitsspeicher deines Browsers. Kein Inhalt wird an einen Server gesendet. Es ist sicher, vertrauliche Dokumentation, interne API-Referenzen oder private Notizen zu schreiben.
Welche Markdown-Variante wird unterstützt? Der Editor verwendet @uiw/react-md-editor, das auf remark basiert und CommonMark-Syntax mit GitHub Flavored Markdown-Erweiterungen unterstützt, einschließlich Tabellen, Aufgabenlisten und Fenced Code Blocks mit Sprachbezeichnern.
Kann ich Bilder einbetten? Ja, mit der Standard-Markdown-Bildsyntax: !alt text. Das Bild muss öffentlich zugänglich sein – lokale Dateipfade funktionieren in einem Browser-Kontext nicht. Das Bild wird sofort in der Live-Vorschau gerendert.
Welche Sprachen werden in Fenced Code Blocks unterstützt? Die Vorschau rendert Syntaxhervorhebung für jede Sprache, die die zugrunde liegende remark/highlight.js-Pipeline unterstützt. Gängige Sprachen – JavaScript, TypeScript, Python, Java, Go, Rust, SQL, Bash, YAML, JSON und viele andere – funktionieren alle mit dem an den öffnenden Fence angehängten Sprachbezeichner.
Benötigt die heruntergeladene HTML-Datei eine Internetverbindung? Nein. Das exportierte document.html enthält alle Stile inline in einem <style>-Block. Es werden keine externen CSS-Frameworks, CDN-Ressourcen oder Schriftarten geladen. Es rendert identisch offline.
Kann ich Tastaturkürzel verwenden? Die @uiw/react-md-editor-Komponente unterstützt Standard-Texteditier-Shortcuts (Ctrl/Cmd+B für Fett, Ctrl/Cmd+I für Kursiv), abhängig von der Plattform. Die Symbolleisten-Schaltflächen sind der zuverlässigste Weg, Formatierungen einzufügen, wenn Shortcuts auf deinem Betriebssystem unterschiedlich funktionieren.
Wie erstelle ich eine Aufgabenliste? Verwende - [ ] für ein nicht markiertes Element und - [x] für ein markiertes Element:
- [x] Write first draft
- [ ] Review with team
- [ ] PublishWas passiert mit meinem Inhalt, wenn ich den Editor leere? Der Editor wird sofort auf eine leere Zeichenkette zurückgesetzt. Inhalte sind nicht aus dem Tool selbst wiederherstellbar, es sei denn, du hast zuvor das Verlaufs-Panel (Premium-Funktion) verwendet oder den Inhalt vorher kopiert/heruntergeladen.
Verwandte Tools
JSON Formatter — JSON-Daten formatieren, bevor sie in Markdown-Dokumentation eingebettet werden.
Diff Checker — Zwei Versionen eines Markdown-Dokuments vergleichen, um Änderungen zwischen Entwürfen zu finden.
Text Diff — Ein textorientiertes Vergleichstool zum Prüfen von Prosa-Änderungen in Dokumentation.
Jetzt Markdown Editor ausprobieren: Markdown Editor