JPKCom DB

Markdown Editor — Beispiele

Praxisnahe Durchläufe mit dem Markdown-Editor: GFM-Tabelle bauen, Task-Liste pflegen, Mermaid-Diagramm zeichnen, Markdown per URL laden und als PDF exportieren.

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 das Templates-Menü. Wähl README.md — der Editor füllt sich mit einem fertigen Grundgerüst, die Vorschau rechts zeigt sofort das gerenderte Ergebnis.
  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. Es wird ein Pipe-Tabellen-Gerüst eingefügt, das du nur noch ausfüllst.
  4. Bist du fertig, sicher das Ergebnis mit Save as .md (oder Strg+S). Der Text liegt ohnehin schon automatisch im localStorage — beim nächsten Aufruf ist er wieder da.

Beispiel 2: Eine GFM-Tabelle sauber aufbauen

Tabellen sind die häufigste Fehlerquelle in Markdown — die Live-Vorschau nimmt dir das Raten ab.

  1. Setz den Cursor in eine leere Zeile und klick Insert table. Du bekommst ein Grundgerüst im Pipe-Format:

    | Spalte A | Spalte B |
| -------- | -------- |
| Zelle    | Zelle    |

  2. Füll die Zellen aus. Die Trennzeile mit den Bindestrichen unter der Kopfzeile ist Pflicht — fehlt sie, rendert markdown-it keine Tabelle, sondern Text mit Pipe-Zeichen. In der Vorschau siehst du sofort, ob es klappt.

  3. Spalten ausrichten geht über Doppelpunkte in der Trennzeile: :-- linksbündig, :-: zentriert, --: rechtsbündig.

  4. Die Spalten müssen im Quelltext nicht bündig sein — das ist reine Lesbarkeit. Wer es ordentlich mag, hält sie trotzdem aligned.

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

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

  3. Für strukturierte Notizen kombinierst du das mit der Meeting Notes-Vorlage aus dem Templates-Menü 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 Save as HTML- und Save as PDF-Export 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. Klick auf Load Markdown from URL. Im Dialog trägst du eine absolute Adresse ein (z. B. https://example.com/README.md) und bestätigst mit Fetch Content.
  2. Der Inhalt wird serverseitig über den JPKCom-Proxy geholt und ersetzt deinen aktuellen Editor-Inhalt — hast du dort noch ungesicherten Text, vorher mit Save as .md sichern.
  3. Bedenke die Grenzen: nur öffentliche HTTP/HTTPS-Adressen (kein localhost/Intranet), maximal 950 KB, etwa 10 s Timeout. 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.

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 Code und Diagramme ohnehin auf helles Thema umgestellt werden.
  2. Öffne das Export-Menü (neben dem Preview-Button).
  3. Save as PDF erzeugt lokal im Browser eine PDF-Datei aus der gerenderten Vorschau. Save as HTML speichert ein vollständiges, eigenständiges HTML-Dokument mit eingebetteten Stilen (KaTeX, Code-Highlighting, Mermaid) — die Datei sieht für sich allein korrekt aus.
  4. Brauchst du das HTML nur kurz woanders, nimm Copy HTML und füg es direkt ein. Für eine reine Papierausgabe gibt es Print.

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.