JPKCom DB

Markdown Editor

Was der Markdown-Editor von JPKCom kann: Live-Vorschau, GitHub Flavored Markdown, KaTeX, Mermaid und Export — der Einstieg zu Manual, Beispielen und Tipps.

Markdown schreiben und sofort sehen, was dabei herauskommt

Der Markdown Editor ist ein vollständiger Editor mit Live-Vorschau: Links tippst du Markdown, rechts siehst du in Echtzeit das gerenderte Ergebnis. Beide Spalten scrollen synchron, sodass du auch in langen Dokumenten immer die Stelle im Blick hast, an der du gerade arbeitest. Es gibt nichts zu speichern, nichts zu kompilieren, keinen Build-Schritt — du schreibst, und die Vorschau folgt dir.

Das löst ein konkretes Alltagsproblem: Markdown ist einfach zu lesen, aber kleine Fehler — eine vergessene Leerzeile vor einer Liste, eine schiefe Tabellen-Spalte, eine Code-Fence, die nicht schließt — fallen erst beim Rendern auf. Mit der Live-Vorschau siehst du den Fehler in dem Moment, in dem du ihn machst, nicht erst nach dem Commit oder dem Upload ins CMS.

Gedacht ist das Tool für alle, die regelmäßig Markdown schreiben: Entwicklerinnen und Entwickler, die READMEs, Changelogs oder API-Dokumentation pflegen; Autorinnen und Autoren, die Blogposts oder Notizen verfassen; und alle, die schnell ein sauber formatiertes Dokument brauchen, ohne eine schwere Office-Anwendung zu öffnen. Alles läuft im Browser, ohne Account und ohne Installation.

Was der Editor kann — auf einen Blick

  • Live-Vorschau mit synchronem Scrollen — Editor und Vorschau nebeneinander, wahlweise auch nur Editor oder nur Vorschau; auf dem Smartphone wechselst du per Tab zwischen „Markdown" und „Preview". Das Scrollen folgt standardmäßig zeilengenau den Blöcken (Überschriften, Bilder, Diagramme), alternativ proportional. Die Vorschau gibt es in drei Lesethemen: Dark, Light und Sepia.
  • GitHub Flavored Markdown und mehr — Tabellen, durchgestrichener Text, Task-Listen und automatisch verlinkte URLs (GFM) plus eine ganze Reihe Erweiterungen: Fußnoten, Definitionslisten, Hoch-/Tiefstellung, Markierung, Abkürzungen, Emoji-Shortcodes, Front Matter, KaTeX-Mathematik und Mermaid-Diagramme. Code-Blöcke werden mit Syntax-Highlighting dargestellt.
  • Komfortable Werkzeugleiste — Schaltflächen für alle Formatierungen (Überschriften, fett, kursiv, Listen, Links, Bilder, Code), die beim zweiten Klick wieder entfernt werden; ein Tabellen-Dialog, der auch CSV-Daten übernimmt; ein durchsuchbarer Emoji-Picker; ein Inhaltsverzeichnis-Panel mit Wortzahl je Abschnitt und Suchen/Ersetzen.
  • Ein File-Menü für alles rund ums Dokument — Neu, Öffnen, Laden per URL, sechs Dokumentvorlagen (README, Changelog, Blogpost, Meeting Notes, API-Doku, MIT-Lizenz), Tidy up Markdown zum Aufräumen (Tabellen ausrichten, überflüssige Leerzeichen und Leerzeilen entfernen) sowie Speichern und Export.
  • Echter Code-Editor darunter — der ACE-Editor mit Zeilennummern, Syntax-Hervorhebung, Undo/Redo, Zeilen verschieben, Vollbild und konfigurierbaren Themes. Eine Statuszeile zeigt Bytes, Wörter, Zeilen und die geschätzte Lesezeit.
  • Einfügen, wie es kommt — Zellen aus Excel oder Google Sheets werden beim Einfügen automatisch zur Markdown-Tabelle, Bilder aus der Zwischenablage oder per Drag & Drop landen eingebettet im Dokument.
  • Automatisches Speichern und Snapshots — dein Text bleibt im localStorage deines Browsers erhalten und ist nach einem Reload wieder da. Zusätzlich hältst du bis zu 20 benannte Snapshots vor; einer entsteht automatisch, bevor ein Dokument ersetzt wird.
  • Import und Export — .md-Dateien öffnen und speichern, Markdown per URL laden sowie das Ergebnis als HTML-Datei oder PDF speichern, als HTML oder als formatierten Text (für Mail, Word oder Google Docs) kopieren und drucken.

Welcher Button genau was tut, welche Markdown-Syntax unterstützt wird und welche Tastaturkürzel es gibt, steht vollständig im Manual.

Läuft im Browser — was an den Server geht, und was nicht

Der Editor arbeitet vollständig in deinem Browser. Dein Text wird gerendert, gespeichert und exportiert, ohne dass dabei etwas an einen Server gesendet wird — die automatische Sicherung und die Snapshots liegen im localStorage deines eigenen Browsers, die PDF- und HTML-Exporte entstehen ebenfalls lokal. Die Vorschau läuft durch den Sanitizer DOMPurify: Eingebettetes HTML wird dargestellt, Skripte und Event-Handler aus fremden Inhalten aber entfernt.

Es gibt genau eine Funktion, die etwas von dir an den Server schickt: Load from URL… im File-Menü. Gibst du eine Adresse ein, holt ein interner, token-geschützter Proxy des JPKCom-Servers den Inhalt dieser URL und legt ihn in den Editor. Das ist nötig, weil dein Browser fremde Seiten aus Sicherheitsgründen nicht direkt laden darf (CORS). An den Server geht dabei nur die URL, die du laden willst — nie der Inhalt, den du selbst tippst. Eine Randnotiz zum Export: Eine gespeicherte HTML-Datei mit Formeln lädt beim späteren Öffnen die KaTeX-Schriften vom JPKCom-Server nach. Details und die Grenzen dieses Proxys stehen im Manual.

Jetzt ausprobieren

→ Markdown Editor öffnen — Tippen, in der Vorschau zusehen, fertig. Ohne Account, kostenlos, direkt im Browser. Wenn du nicht bei null anfangen willst, lädt das File-Menü unter „New from template" ein fertiges Grundgerüst für README, Changelog, Blogpost und mehr.

Verwandte JPKCom-Tools

  • WYSIWYG Editor — der nächste Verwandte: ein Rich-Text-HTML-Editor auf TipTap-Basis mit Markdown-Import und -Export. Wenn du lieber visuell als in Markdown-Syntax arbeitest, ist das die Alternative — und du kannst Inhalte zwischen beiden Tools hin- und herschieben.
  • Source Viewer — Quelltext für über 100 Sprachen ansehen und mit Syntax-Highlighting darstellen. Praktisch, um die HTML-Ausgabe des Editors zu inspizieren.
  • Beautify — JavaScript, CSS und HTML formatieren; nützlich, um exportiertes HTML aufzuräumen.
  • llms.txt-Generator — Markdown ist das natürliche Format für KI-Kontext; mit diesem Tool baust du eine gültige llms.txt für deine Inhalte.

Tiefer geht es auf den Unterseiten: das Manual mit jeder Funktion, jedem Button und dem vollen Syntax-Umfang, praxisnahe Beispiele und gesammelte Tipps & Tricks.