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

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

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/) 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](https://www.jpkc.com/tools/md/) 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:

   ```markdown
   | 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:

   ```markdown
   - [ ] 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:

   ```mermaid
   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](https://www.jpkc.com/db/tools/md/manual/#architektur-speicherung-und-datenschutz)).
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](https://www.jpkc.com/db/tools/md/manual/) für jede Funktion im Detail, die [Tipps & Tricks](https://www.jpkc.com/db/tools/md/tips/) für Strategie und Stolperfallen. Ausprobieren kannst du alles direkt im [Tool](https://www.jpkc.com/tools/md/).