JPKCom DB

Markdown Editor — Beispiele

Praxisnahe Durchläufe mit dem Markdown-Editor: Tabelle aus Excel, Task-Liste, Mermaid-Diagramm, Markdown per URL laden, PDF-Export und Snapshots.

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

Das Manual erklärt jede Schaltfläche und die volle Syntax. Diese Seite ergänzt das um konkrete Arbeitsabläufe — typische Aufgaben, Schritt für Schritt durchgespielt. Die Oberfläche des Tools ist auf Englisch; Button- und Menü-Namen stehen deshalb im Original, bei Bedarf mit deutscher Erläuterung.

Beispiel 1: Aus einer Vorlage ein README schreiben

Der schnellste Start ist eine Vorlage statt einer leeren Seite.

  1. Öffne den Editor und klick in der Werkzeugleiste auf File. Wähl unter New from template den Eintrag README.md — steht schon eigener Text im Editor, bestätigst du die Rückfrage. Der Editor füllt sich mit einem fertigen Grundgerüst, die Vorschau rechts zeigt sofort das gerenderte Ergebnis. Dein bisheriger Text ist nicht verloren: Er liegt als automatischer Snapshot unter File → Snapshots….
  2. Überschreib die Platzhalter. Während du tippst, aktualisiert sich die Preview in Echtzeit; weil beide Spalten synchron scrollen, bleibt die bearbeitete Stelle im Blick.
  3. Brauchst du eine Tabelle (z. B. für eine Optionen-Übersicht), klick auf Insert table in der zweiten Werkzeugleisten-Zeile, stell Spalten und Zeilen ein und bestätige mit Insert (Details in Beispiel 2).
  4. Bist du fertig, sicher das Ergebnis über File → Save as Markdown (oder Strg+S). Der Dateiname kommt aus der ersten Überschrift: Aus # Mein Projekt wird mein-projekt.md. Der Text liegt ohnehin schon automatisch im localStorage — beim nächsten Aufruf ist er wieder da.

Beispiel 2: Eine Tabelle aus Excel oder CSV übernehmen

Tabellen sind die häufigste Fehlerquelle in Markdown — und von Hand mühsam. Der Editor nimmt dir beides ab.

  1. Markier in Excel, LibreOffice oder Google Sheets einen Zellbereich samt Kopfzeile und kopier ihn.

  2. Setz im Editor den Cursor in eine leere Zeile und füg mit Strg+V ein. Aus den tabulatorgetrennten Zellen wird automatisch eine ausgerichtete Markdown-Tabelle; eine Meldung bestätigt „Pasted as Markdown table". Willst du doch den Rohtext, nimm die Tabelle mit Strg+Z wieder heraus und füg die Zellen in einen Code-Block ein; dort wird nicht umgewandelt.

    | Name | Rolle    | Stadt  |
| ---- | -------- | ------ |
| Ada  | Engineer | London |

  3. Liegen die Daten als CSV vor (etwa aus einem Export mit Komma oder Semikolon), klick Insert table und füg sie im Feld …or paste data ein. Die erste Zeile wird zur Kopfzeile; unter Preview siehst du das Markdown, bevor du es mit Insert übernimmst. Über Alignment richtest du alle Spalten links, zentriert oder rechts aus.

  4. Ohne Daten erzeugt der Dialog eine leere Tabelle mit der gewählten Zahl an Columns und Body rows, die Kopfzellen heißen Column 1, Column 2 …

  5. Die Trennzeile mit den Bindestrichen unter der Kopfzeile ist Pflicht — fehlt sie, rendert markdown-it keine Tabelle, sondern Text mit Pipe-Zeichen. Ausrichten geht über Doppelpunkte: :-- linksbündig, :-: zentriert, --: rechtsbündig.

  6. Hast du die Tabelle später von Hand erweitert und die Spalten stehen schief, ruf File → Tidy up Markdown auf: Alle Tabellen des Dokuments werden wieder bündig ausgerichtet, an der gerenderten Ausgabe ändert sich nichts.

Beispiel 3: Eine Task-Liste pflegen

Task-Listen (GFM) sind ideal für Meeting Notes oder eine kleine To-do-Spur.

  1. Wähl im Lists-Menü (zweite Werkzeugleisten-Zeile) den Eintrag Task List, oder tippe direkt:

    - [ ] Entwurf schreiben
- [x] Quellen sammeln
- [ ] Korrektur lesen

    Hast du schon eine normale Aufzählung, markier die Zeilen und wähl Task List: Die Listenmarker werden ersetzt, nicht doppelt gesetzt. Ein zweiter Klick auf Task List entfernt sie wieder.

  2. In der Vorschau erscheinen echte Checkboxen; [x] ist angehakt, [ ] offen.

  3. Für strukturierte Notizen kombinierst du das mit der Meeting Notes-Vorlage (File → New from template) und ergänzt die offenen Punkte als Task-Liste.

Beispiel 4: Ein Mermaid-Diagramm zeichnen

Diagramme direkt aus Text — ohne Grafikprogramm.

  1. Klick auf Insert Mermaid diagram in der zweiten Werkzeugleisten-Zeile. Eingefügt wird ein Code-Block mit der Sprache mermaid und einem Beispiel-Graphen:

    graph TD
    A[Start] --> B[End]

  2. Die Vorschau rendert das sofort als Flussdiagramm. Erweitere den Graphen nach Bedarf — Mermaid kann unter anderem Flowchart, Sequenz-, Klassen-, State-, ER-Diagramme, Gantt und Pie.

  3. Für Formeln statt Diagrammen nimmst du das Math (KaTeX)-Menü: Math Inline für $E = mc^2$ mitten im Text, Math Block für eine abgesetzte Formel wie $$\sum_{i=1}^{n} x_i$$.

  4. Wichtig fürs spätere Teilen: Beim Export als HTML oder PDF, beim Kopieren und beim Drucken werden Mermaid-Diagramme automatisch ins helle Thema umgerendert, damit sie auf weißem Grund lesbar bleiben.

Beispiel 5: Vorhandenes Markdown per URL laden und weiterbearbeiten

Du willst ein README aus dem Web oder eine .md-Datei von einem Server als Ausgangspunkt nehmen.

  1. Öffne File → Load from URL…. Im Dialog „Load Markdown from URL" trägst du eine absolute Adresse ein (z. B. https://example.com/README.md) und bestätigst mit Fetch Content oder Enter. Der Proxy liefert die Antwort unverändert: Zeigt die Adresse auf eine HTML-Seite statt auf die Markdown-Datei, landet deren HTML-Quelltext im Editor. Nimm also die direkte Adresse der .md-Datei, bei GitHub die Raw-Ansicht.
  2. Der Inhalt wird serverseitig über den JPKCom-Proxy geholt und ersetzt deinen aktuellen Editor-Inhalt. Dein bisheriger Text landet vorher automatisch als Snapshot unter File → Snapshots…, und Strg+Z holt ihn ebenfalls zurück.
  3. Bedenke die Grenzen: nur öffentliche HTTP/HTTPS-Adressen (kein localhost/Intranet), maximal 950 KB, 10 s Timeout je Abruf (höchstens 30 s mit Weiterleitungen). Lehnt der Proxy den Abruf ab (ungültige oder interne Adresse, zu groß, leer, Rate-Limit), zeigt das Tool die Fehlermeldung an und lässt dein Dokument unverändert. Liefert der Zielserver dagegen eine Fehlerseite (etwa 404), landet deren Text im Editor; dein vorheriger Stand liegt dann im automatischen Snapshot und kommt auch mit Strg+Z zurück. An den Server geht dabei nur die URL, nie dein eigener Text (siehe Manual).
  4. Jetzt bearbeitest du den geladenen Text wie gewohnt und exportierst oder speicherst ihn neu. Enthält die Datei eingebettetes HTML, rendert die Vorschau es — Skripte und Event-Handler filtert DOMPurify vorher heraus.

Beispiel 6: Als PDF oder eigenständiges HTML exportieren

Aus dem Markdown ein teilbares Dokument machen.

  1. Schreib und prüf dein Dokument in der Vorschau. Optional wählst du oben rechts in der Vorschau-Kopfzeile das passende Lesethema (Dark, Light, Sepia) — fürs Exportieren ist die Themenwahl egal, weil der Export immer in hellem Design entsteht und Code und Diagramme entsprechend umgestellt werden.
  2. Achte auf eine erste Überschrift: Aus ihr entstehen der Dateiname (# Quartalsbericht Q3 wird zu quartalsbericht-q3.pdf) und der Titel der HTML-Datei.
  3. Öffne das File-Menü und wähl unter Save & export das Format. Save as PDF erzeugt lokal im Browser eine A4-PDF aus dem gerenderten Dokument. Save as HTML speichert ein vollständiges, eigenständiges HTML-Dokument mit eingebetteten Stilen für Layout, Code-Highlighting und KaTeX; nur die Formel-Schriften und per URL eingebundene Bilder lädt die Datei beim Öffnen aus dem Netz.
  4. Willst du den Text in eine Mail, in Word oder Google Docs übernehmen, nimm Copy as formatted text und füg ihn dort ein — das Zielprogramm übernimmt das gerenderte HTML samt Formatierung, ein reines Textfeld bekommt stattdessen den Markdown-Quelltext. Copy as HTML kopiert dagegen den kompletten HTML-Quelltext des Dokuments, etwa zum Einfügen in ein CMS-Quelltextfeld. Für eine Papierausgabe gibt es Print preview….
  5. Dieselben Funktionen erreichst du auch aus der Vollbild-Vorschau (Preview-Button) über Copy, Save, PDF und Print.

Beispiel 7: Mit Snapshots gefahrlos umbauen

Du willst einen langen Text radikal umstellen, aber den jetzigen Stand nicht verlieren.

  1. Öffne File → Snapshots…, gib einen Namen wie Vor dem Umbau ein und klick Save current document.
  2. Bau den Text um. Jeder automatisch gesicherte Zwischenstand landet weiter im localStorage, der Snapshot bleibt davon unberührt.
  3. Gefällt dir das Ergebnis nicht, öffne File → Snapshots… erneut und klick bei Vor dem Umbau auf Restore. Der Editor legt vorher selbst noch einen Snapshot des aktuellen Stands an („… — before restoring …"), du kannst also auch wieder zurück.
  4. Auch ohne eigenen Snapshot bist du abgesichert: Bevor eine Vorlage, eine geöffnete Datei, Load from URL…, New document oder Clear document den Text ersetzt, entsteht automatisch ein Snapshot mit dem Vermerk „automatic". Bis zu 20 Snapshots hält der Editor vor, ältere automatische fallen zuerst heraus.
  5. Snapshots liegen nur in diesem Browser. Für ein Backup, das den Browser-Speicher überlebt, speicherst du zusätzlich mit Save as Markdown.

Noch tiefer: das Manual für jede Funktion im Detail, die Tipps & Tricks für Strategie und Stolperfallen. Ausprobieren kannst du alles direkt im Tool.