Markdown Editor — Tipps & Tricks

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.
Wähl den Scroll-Modus passend zum Dokument. Der Standard Line-accurate hält die Vorschau exakt am Block, den du bearbeitest — ideal für Texte mit Bildern, Diagrammen und Tabellen, weil die Vorschau nicht mehr davonläuft. Stört dich, dass sie über einem großen Bild kurz schneller wird, stell in den Settings unter Synchronized scrolling auf Proportional (classic, evenly paced) um; das läuft gleichmäßig und passt gut zu reinem Fließtext.
Wechsle die Ansicht je nach Phase. Beim Strukturieren und Tippen ist Editor + Preview ideal. Zum reinen Schreiben am Stück gibt Editor only Platz; zum finalen Gegenlesen oder Präsentieren nimmst du Preview only oder die Preview (Fullscreen). Auf dem Smartphone wechselst du über die Tabs Markdown und Preview.
Das Inhaltsverzeichnis-Panel ist Sprungnavigation und Längenmesser. Table of Contents baut sich aus deinen Überschriften auf — in langen Dokumenten springst du darüber schneller, als zu scrollen, und die Überschrift landet oben im Editor. Die Zahl neben jedem Eintrag ist die Wortzahl des Abschnitts: So erkennst du auf einen Blick, welches Kapitel ausufert. Für die Gesamtlänge schau in die Statuszeile unter dem Editor, sie nennt Wörter und die geschätzte Lesezeit.
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 — gefiltert. Du kannst HTML mischen, etwa ein <details>-Element. Vorher läuft die Ausgabe aber durch DOMPurify: <script>-Tags, Event-Handler und andere ausführbare Teile verschwinden, auch aus per URL geladenen Dateien. Fehlt in der Vorschau also ein Teil deines HTML, hat der Filter ihn als gefährlich eingestuft. Im Quelltext bleibt er stehen und wird mit Save as Markdown unverändert gespeichert.
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 Code-Block, und zwar ohne Farben, weil highlight.js die Sprache nicht kennt.
linkify verlinkt nackte URLs automatisch — auch ohne Protokoll. Eine im Text stehende Adresse wird zum Link, auch ohne […](…)-Syntax, und sogar ein bloßes example.com wird verlinkt. Meist praktisch — wenn du eine URL oder einen Dateinamen, der wie eine Domain aussieht, nur als Text zeigen willst, setz ihn in Inline-Code.
Front Matter wird erkannt, aber nur ganz oben. Ein ----Block (YAML) oder +++-Block (TOML) in Zeile 1 erscheint in der Vorschau als abgesetzter Codeblock — praktisch für Blogposts, die später ein Static-Site-Generator weiterverarbeitet; die Vorlage Blog Post legt genau so einen Block an. Steht davor auch nur eine Leerzeile, interpretiert markdown-it die --- als horizontale Linie bzw. Setext-Überschrift.

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 Markdown (Strg+S).
Ersetzen lässt sich zurückholen. New document, Clear document, Vorlagen, geöffnete Dateien und Load from URL… ersetzen den Editor-Inhalt vollständig. Vorher legt der Editor aber automatisch einen Snapshot an, und Strg+Z macht das Ersetzen rückgängig. Den Snapshot holst du über File → Snapshots… → Restore zurück, auch nach einem Reload.
Setz vor großen Umbauten einen benannten Snapshot. Die automatischen Snapshots heißen „… — before clearing" o. Ä. und fallen als Erste heraus, wenn das Limit von 20 erreicht ist. Einen Stand, auf den du sicher zurückwillst, speicherst du deshalb mit eigenem Namen über Save current document.
New document ist kein leeres Blatt. Es lädt den Willkommenstext mit Beispielen für die wichtigsten Syntax-Elemente — gut zum Nachschlagen. Eine leere Seite bekommst du mit Clear document.
Das Status-Badge ist dein Sicherungsanzeiger. Springt es in der Editor-Kopfzeile auf grün, ist der aktuelle Stand im localStorage. Wird es rot, ist der Speicher voll oder gesperrt — häufig nach mehreren eingefügten Bildern, die als Base64 im Text stecken. Dann sicherst du das Dokument als Datei und verlinkst große Bilder lieber, statt sie einzubetten.

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 — fast. Layout, Code-Highlighting und das KaTeX-CSS sind eingebettet, die Datei braucht keine externen Stylesheets. Zwei Dinge kommen aber beim Öffnen aus dem Netz: die Schriften für Formeln (vom JPKCom-Server) und Bilder, die du per URL eingebunden hast. Soll die Datei offline vollständig sein, bettest du Bilder per Drag & Drop als Data-URI ein.
Die erste Überschrift benennt die Datei. Ob .md, .html oder .pdf: Der Dateiname entsteht aus der ersten Überschrift (# Release Notes 2.0 → release-notes-2-0.pdf). Fehlt sie, nimmt das Tool die erste Textzeile, und nur wenn daraus kein Name entsteht, heißt die Datei document.*. Mit einer sauberen H1 sparst du dir das Umbenennen.
Copy as formatted text für Mail und Office, Copy as HTML für Quelltext. Willst du das Ergebnis in eine Mail, nach Word oder Google Docs bringen, nimm Copy as formatted text — das Zielprogramm bekommt gerendertes HTML, ein reines Textfeld den Markdown-Quelltext. Copy as HTML kopiert dagegen das komplette HTML-Dokument mit <head> und Stilen als Text; das brauchst du, wenn du HTML-Quelltext weiterverarbeiten willst. Für ein CMS-Feld, das nur den Inhalt erwartet, nimmst du daraus den Teil zwischen <body> und </body>.

Schneller formatieren und aufräumen

Buttons schalten um. Ein zweiter Klick auf Bold, Italic & Co. entfernt die Marker wieder, solange der Text markiert ist. Bei Überschriften ersetzt eine andere Ebene die alte, bei Listen ein anderer Typ den vorhandenen — du musst also nicht erst von Hand ## oder - löschen.
Tabellen aus der Tabellenkalkulation einfach einfügen. Zellen aus Excel oder Google Sheets mit Strg+V in den Editor einfügen, und sie werden zur ausgerichteten Markdown-Tabelle. CSV-Daten mit Komma oder Semikolon gibst du im Dialog Insert table unter …or paste data ein.
Tidy up Markdown vor dem Commit. File → Tidy up Markdown richtet alle Tabellen bündig aus, entfernt Leerzeichen am Zeilenende und doppelte Leerzeilen — die gerenderte Ausgabe bleibt identisch, der Inhalt von Code-Blöcken mit Backticks oder Tilden und das Front Matter bleiben unangetastet. Das hält Diffs in Git sauber.
Emojis per Doppelpunkt. Tipp : und die ersten Buchstaben (:thu), und eine Vorschlagsliste klappt auf. Eingefügt wird der Shortcode (:thumbsup:), nicht das Zeichen — der Quelltext bleibt reines ASCII, die Vorschau zeigt das Emoji. Den Picker mit Suche gibt es zusätzlich in der Werkzeugleiste.
Werkzeugleiste ohne Maus. Mit Tab springst du in die Leiste, mit den Pfeiltasten von Button zu Button, Enter löst aus. Die Leiste ist nur ein einziger Tab-Stopp, mit dem nächsten Tab bist du wieder draußen.

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