# 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.

Source: https://www.jpkc.com/db/tools/md/

## Markdown schreiben und sofort sehen, was dabei herauskommt

Der [Markdown Editor](https://www.jpkc.com/tools/md/) 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. 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, **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, Tabellen, Links, Bilder, Code), dazu ein Inhaltsverzeichnis-Panel, sechs Dokumentvorlagen (README, Changelog, Blogpost, Meeting Notes, API-Doku, MIT-Lizenz) und Suchen/Ersetzen.
- **Echter Code-Editor darunter** — der ACE-Editor mit Zeilennummern, Syntax-Hervorhebung, Undo/Redo, Zeilen verschieben, Vollbild und konfigurierbaren Themes.
- **Automatisches Speichern** — dein Text bleibt im `localStorage` deines Browsers erhalten und ist nach einem Reload wieder da.
- **Import und Export** — `.md`-Dateien öffnen und speichern, Markdown per URL laden sowie das gerenderte Ergebnis als HTML kopieren, als HTML-Datei speichern, als PDF exportieren oder drucken.

Welcher Button genau was tut, welche Markdown-Syntax unterstützt wird und welche Tastaturkürzel es gibt, steht vollständig im [Manual](https://www.jpkc.com/db/tools/md/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 liegt im `localStorage` deines eigenen Browsers, die PDF- und HTML-Exporte entstehen ebenfalls lokal.

Es gibt **genau eine** Funktion, die überhaupt mit dem Server spricht: **Load Markdown from URL**. 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. Details und die Grenzen dieses Proxys stehen im [Manual](https://www.jpkc.com/db/tools/md/manual/#architektur-speicherung-und-datenschutz).

## Jetzt ausprobieren

**[→ Markdown Editor öffnen](https://www.jpkc.com/tools/md/)** — Tippen, in der Vorschau zusehen, fertig. Ohne Account, kostenlos, direkt im Browser. Wenn du nicht bei null anfangen willst, lädt das Vorlagen-Menü in der Werkzeugleiste ein fertiges Grundgerüst für README, Changelog, Blogpost und mehr.

## Verwandte JPKCom-Tools

- **[WYSIWYG Editor](https://www.jpkc.com/db/tools/wysiwyg/)** — 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](https://www.jpkc.com/db/tools/source/)** — Quelltext für über 100 Sprachen ansehen und mit Syntax-Highlighting darstellen. Praktisch, um die HTML-Ausgabe des Editors zu inspizieren.
- **[Beautify](https://www.jpkc.com/db/tools/beautify/)** — JavaScript, CSS und HTML formatieren; nützlich, um exportiertes HTML aufzuräumen.
- **[llms.txt-Generator](https://www.jpkc.com/db/tools/llms/)** — 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](https://www.jpkc.com/db/tools/md/manual/)** mit jeder Funktion, jedem Button und dem vollen Syntax-Umfang, praxisnahe **[Beispiele](https://www.jpkc.com/db/tools/md/examples/)** und gesammelte **[Tipps & Tricks](https://www.jpkc.com/db/tools/md/tips/)**.