JPKCom DB

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.

Zurück zur Übersicht: Markdown Editor · Tool live öffnen: www.jpkc.com/tools/md/

Das Manual beschreibt jede Funktion, die Beispiele 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). 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 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 mit Syntax-Highlighting an und formatierst es bei Bedarf mit 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.

Noch mehr Kontext: die Übersicht zum großen Bild, das Manual für jede Funktion und die Beispiele für die Schritt-für-Schritt-Abläufe. Ausprobieren kannst du alles direkt im Tool.