# Markdown Editor — Tipps & Tricks

> Kniffe für den Markdown-Editor: Live-Vorschau clever nutzen, Render-Stolperfallen (breaks, Typographer, KaTeX) und die Kombination mit anderen Tools.

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

Zurück zur Übersicht: [Markdown Editor](https://www.jpkc.com/db/tools/md/) · Tool live öffnen: [www.jpkc.com/tools/md/](https://www.jpkc.com/tools/md/)

Das [Manual](https://www.jpkc.com/db/tools/md/manual/) beschreibt jede Funktion, die [Beispiele](https://www.jpkc.com/db/tools/md/examples/) zeigen die Abläufe. Hier geht es um das, was beides voraussetzt, aber selten dabeisteht: wie du die Live-Vorschau wirklich für dich arbeiten lässt, welche Render-Eigenheiten dich sonst überraschen und wie du den Editor mit anderen JPKCom-Tools verzahnst. Die Oberfläche ist auf Englisch — die echten Button-Namen stehen deshalb im Original.

## Die Live-Vorschau clever nutzen

- **Synchrones Scrollen ist dein Korrekturmodus.** Bei langen Dokumenten siehst du dank der gekoppelten Spalten immer den gerenderten Stand der Stelle, an der du tippst. Schalt es über **Toggle synchronized scrolling** nur dann aus, wenn du im Quelltext bewusst an einer anderen Stelle nachschlagen willst als in der Vorschau.
- **Wechsle die Ansicht je nach Phase.** Beim Strukturieren und Tippen ist **Editor + Preview** ideal. Zum reinen Schreiben am Stück (oder auf schmalem Schirm) gibt **Editor only** Platz; zum finalen Gegenlesen oder Präsentieren nimmst du **Preview only** oder die **Preview (Fullscreen)**.
- **Das Inhaltsverzeichnis-Panel ist eine Sprungnavigation.** **Table of Contents** baut sich aus deinen Überschriften auf — in langen Dokumenten springst du darüber schneller, als zu scrollen. Das setzt eine saubere Überschriften-Hierarchie voraus, was ohnehin gut ist.
- **Lesethema passend zum Zielmedium wählen.** Die Vorschau hat **Dark**, **Light** und **Sepia**. Für die Bildschirmarbeit ist Dark angenehm; willst du einschätzen, wie das Dokument gedruckt oder als helles PDF aussieht, schalt vorher auf **Light**.

## Render-Stolperfallen kennen

Der Editor rendert mit markdown-it samt einiger eingeschalteter Optionen — die bequem sind, aber vom strikten CommonMark abweichen. Wer das weiß, wundert sich nicht:

- **`breaks` ist an: jeder einfache Zeilenumbruch wird zu `<br>`.** Das ist angenehm beim Tippen, weicht aber von GFM/CommonMark ab, wo ein einfacher Umbruch im selben Absatz *keinen* Zeilenumbruch erzeugt. Wenn du dein Markdown später in einer Umgebung verwendest, die `breaks` **nicht** setzt (viele statische Generatoren, GitHub im Fließtext), sieht der Umbruch dort anders aus. Trenn Absätze im Zweifel mit einer **Leerzeile**, dann rendert es überall gleich.
- **Der Typographer ersetzt automatisch.** Gerade Anführungszeichen werden zu typografischen, `--` wird zum Halbgeviert-, `---` zum Geviertstrich, `...` zur Ellipse. Steht `---` aber allein auf einer Zeile, ist es eine **horizontale Linie** — nicht jeder Bindestrich-Lauf wird also zum Strich. Wenn du buchstäblich drei Bindestriche im Text brauchst, escape sie.
- **`html` ist an: eingebettetes HTML wird gerendert.** Das ist mächtig (du kannst HTML mischen), aber bedenke es beim Einfügen fremder Inhalte oder beim Laden per URL — `<script>` & Co. aus einer unbekannten Quelle gehören nicht ungeprüft in die Vorschau.
- **KaTeX nutzt Dollar-Delimiter.** `$…$` ist Inline-Mathematik, `$$…$$` ein Mathe-Block. Ein einzelnes `$`-Zeichen mitten im Text (Preise, Shell-Variablen) kann deshalb als Formel-Start fehlinterpretiert werden — escape es als `\$`, wenn die Vorschau zickt.
- **Mermaid braucht die exakte Sprachangabe.** Nur ein Code-Block mit `mermaid` als Sprache wird zum Diagramm; ein Tippfehler in der Sprachzeile macht daraus einen normalen, syntax-gehighlighteten Code-Block.
- **`linkify` verlinkt nackte URLs automatisch.** Eine im Text stehende Adresse wird zum Link, auch ohne `[…](…)`-Syntax. Meist praktisch — wenn du eine URL nur als Text zeigen willst, setz sie in Inline-Code.

## Speichern, Laden, Verwerfen — ohne Datenverlust

- **Auto-Save ist bequem, aber browsergebunden.** Dein Text liegt automatisch im `localStorage` **dieses** Browsers (siehe [Manual](https://www.jpkc.com/db/tools/md/manual/#architektur-speicherung-und-datenschutz)). Ein anderer Browser, ein anderes Gerät oder ein geleerter Browser-Speicher kennt ihn nicht. Für alles, was du behalten willst, gilt: einmal **Save as .md**.
- **New und Clear sind endgültig.** Beide leeren den Editor — sicher vorher, wenn der Inhalt noch nicht als Datei liegt.
- **Load Markdown from URL ersetzt, es ergänzt nicht.** Der geladene Inhalt überschreibt den aktuellen Editor-Text vollständig. Hast du dort noch etwas Ungesichertes, erst speichern.
- **Das Status-Badge ist dein Sicherungsanzeiger.** Springt es in der Editor-Kopfzeile auf grün, ist der aktuelle Stand im `localStorage`.

## Sauber exportieren

- **Für PDF/HTML ist das Vorschau-Thema egal.** Beim **Save as PDF**- und **Save as HTML**-Export werden Code-Blöcke und Mermaid-Diagramme automatisch auf ein **helles** Thema umgestellt, damit sie auf weißem Grund lesbar sind — unabhängig davon, ob du gerade Dark, Light oder Sepia ansiehst.
- **Save as HTML liefert ein eigenständiges Dokument.** Die nötigen Stile (KaTeX, Code-Highlighting, Mermaid-Layout) sind eingebettet; die Datei sieht also auch ohne Internetzugang und externe Stylesheets korrekt aus.
- **Copy HTML für den Schnellweg.** Willst du das Ergebnis nur kurz woanders einsetzen, ist **Copy HTML** schneller als eine Datei — den gerenderten Code direkt in das Zielsystem einfügen.

## Mit anderen JPKCom-Tools kombinieren

- **Lieber visuell als in Syntax? Der [WYSIWYG Editor](https://www.jpkc.com/db/tools/wysiwyg/)** ist der nächste Verwandte: ein Rich-Text-HTML-Editor auf TipTap-Basis mit Markdown-Import und -Export. Du kannst Inhalte zwischen beiden Tools hin- und herschieben — im Markdown Editor strukturieren, im WYSIWYG-Tool visuell feinschleifen, oder umgekehrt.
- **Exportiertes HTML prüfen und aufräumen.** Das per **Copy HTML**/**Save as HTML** erzeugte Markup schaust du dir im **[Source Viewer](https://www.jpkc.com/db/tools/source/)** mit Syntax-Highlighting an und formatierst es bei Bedarf mit **[Beautify](https://www.jpkc.com/db/tools/beautify/)**.
- **Markdown ist das KI-Format.** Wenn du Inhalte für KI-Systeme bereitstellst, ist Markdown das rauschärmste Format. Eine passende, gültige `llms.txt` für deine Seite baust du mit dem **[llms.txt-Generator](https://www.jpkc.com/db/tools/llms/)**.

---

Noch mehr Kontext: die [Übersicht](https://www.jpkc.com/db/tools/md/) zum großen Bild, das [Manual](https://www.jpkc.com/db/tools/md/manual/) für jede Funktion und die [Beispiele](https://www.jpkc.com/db/tools/md/examples/) für die Schritt-für-Schritt-Abläufe. Ausprobieren kannst du alles direkt im [Tool](https://www.jpkc.com/tools/md/).