# Markdown Editor — Manual > Funktionsreferenz des Markdown-Editors: jede Schaltfläche, der volle GFM- und Erweiterungs-Umfang, Architektur, Export und alle Tastaturkürzel. Source: https://www.jpkc.com/db/tools/md/manual/ 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/) Dieses Manual beschreibt den **Markdown Editor** vollständig: jede Schaltfläche der Werkzeugleiste, die unterstützte Markdown-Syntax in voller Breite, wie der Editor speichert, wie der Export funktioniert und welche Grenzen gelten. Die Oberfläche des Tools ist auf Englisch — die Button- und Menü-Bezeichnungen werden hier deshalb in ihrer englischen Original-Schreibweise genannt (mit deutscher Erläuterung), damit du dich im echten Interface zurechtfindest. ## Aufbau der Oberfläche Der Editor besteht aus drei Bereichen: 1. **Die zweizeilige Werkzeugleiste** ganz oben — Zeile 1 mit Datei-, Ansichts- und Export-Aktionen, Zeile 2 mit den eigentlichen Markdown-Formatierungen. 2. **Die Editor-Spalte** (links, Überschrift „Markdown") — hier tippst du. Unten rechts in ihrer Kopfzeile zeigt ein kleines Badge den `localStorage`-Status: grün, wenn der aktuelle Stand gesichert ist. 3. **Die Vorschau-Spalte** (rechts, Überschrift „Preview") — das gerenderte Ergebnis, umschaltbar zwischen den Lesethemen **Dark**, **Light** und **Sepia**. Beide Spalten scrollen standardmäßig **synchron**. Auf schmalen Bildschirmen werden die Spalten gestapelt, und einige Schaltflächen (Zwischenablage, Vollbild) blenden sich aus. ## GitHub Flavored Markdown und Erweiterungen Gerendert wird mit **markdown-it**, konfiguriert mit eingeschaltetem `linkify` (nackte URLs werden zu Links), `breaks` (ein einfacher Zeilenumbruch wird zum `
`), `typographer` (typografische Ersetzungen) und `html` (eingebettetes HTML wird gerendert). Darauf sitzt eine ganze Reihe Plugins. Der unterstützte Umfang: ### GFM-Kern - **Überschriften** `#` bis `######` - **Fett** `**text**`, **kursiv** `*text*`, **durchgestrichen** `~~text~~` - **Inline-Code** `` `code` `` und **Code-Blöcke** mit drei Backticks und optionaler Sprachangabe — dargestellt mit Syntax-Highlighting über **highlight.js** - **Listen** — ungeordnet (`-`), geordnet (`1.`) und **Task-Listen** (`- [x]` / `- [ ]`) - **Tabellen** im Pipe-Format `| A | B |` - **Blockzitate** `> …`, **horizontale Linien** `---` - **Links** `[text](url)`, **Bilder** `![alt](url)` und **automatisch verlinkte** nackte URLs ### Erweiterungen über GFM hinaus - **Fußnoten** — `Text[^1]` mit `[^1]: Notentext` - **Definitionslisten** — eine Zeile `Begriff`, darunter `: Definition` - **Tiefstellung** `~text~` (z. B. `H~2~O`) und **Hochstellung** `^text^` (z. B. `x^2^`) - **Markierung** `==text==` (``) und **Einfügung** `++text++` (``) - **Abkürzungen** — `*[HTML]: Hyper Text Markup Language` erzeugt ein `` mit Tooltip - **Emoji-Shortcodes** — `:smile:`, `:heart:`, `:rocket:` … - **Mathematik mit KaTeX** — inline `$E = mc^2$`, als Block `$$\sum_{i=1}^{n} x_i$$` (Dollar-Delimiter) - **Mermaid-Diagramme** — ein Code-Block mit Sprache `mermaid` wird als Diagramm gerendert (Flowchart, Sequenz, Klasse, State, ER, Gantt, Pie) - **Typographer** — gerade Anführungszeichen werden zu typografischen, `--` zu Halbgeviert-, `---` zu Geviertstrich, `...` zur Ellipse - **Roh-HTML** — eingebettete HTML-Tags werden in der Vorschau gerendert Das eingebaute **Markdown Cheat Sheet** (im Tools-Menü `…`) listet diese Syntax kompakt mit Beispielen. ## Werkzeugleiste, Zeile 1 — Datei und Ansicht ### File operations — New / Open / Save / Load from URL / Clear - **New document** — leert den Editor für ein neues Dokument. - **Open .md file** — öffnet eine lokale Datei (`.md`, `.markdown`, `.txt`) per Dateidialog. - **Save as .md** — speichert den aktuellen Editor-Inhalt als Markdown-Datei (auch über `Strg`+`S`). - **Load Markdown from URL** — öffnet einen Dialog, in den du eine URL einträgst; der Inhalt dieser URL wird serverseitig geholt und **ersetzt** den aktuellen Editor-Inhalt. Mechanik und Grenzen siehe [Architektur](#architektur-speicherung-und-datenschutz). - **Clear editor** — verwirft den Inhalt. ### Templates — Dokumentvorlagen Ein Menü mit sechs fertigen Grundgerüsten, die den Editor füllen: **README.md**, **Changelog**, **Blog Post**, **Meeting Notes**, **API Documentation** und **License (MIT)**. Gut als Startpunkt, statt mit einer leeren Seite zu beginnen. ### Clipboard — Cut / Copy / Paste Ausschneiden, Kopieren und Einfügen (nur auf größeren Bildschirmen sichtbar) — die üblichen Zwischenablage-Aktionen auf den Editor-Inhalt. ### Undo / Redo Rückgängig (`Strg`+`Z`) und Wiederholen (`Strg`+`Y`) über die volle ACE-Historie. ### Font size — Schriftgröße Zwei Schaltflächen verkleinern und vergrößern die Schrift im Editor (auch in den Settings als Zahlenwert einstellbar). ### View options — Ansicht - **Editor + Preview** — geteilte Ansicht (Standard). - **Editor only** — nur der Editor. - **Preview only** — nur die Vorschau. - **Table of Contents** — blendet ein Inhaltsverzeichnis-Panel ein, das aus den Überschriften deines Dokuments aufgebaut wird. - **Toggle line wrap** — schaltet den Zeilenumbruch im Editor um. - **Toggle synchronized scrolling** — schaltet das synchrone Scrollen von Editor und Vorschau ein/aus (Standard: ein). - **Toggle fullscreen** — Vollbildmodus (mit `Escape` verlassen). ### Tools-Menü (`…`) - **Go to Line** (`Strg`+`G`), **Find** (`Strg`+`F`), **Replace** (`Strg`+`H`) — Navigation und Suche. - **Print Markdown** — druckt den rohen Markdown-Quelltext. - **Markdown Cheat Sheet** — das eingebaute Syntax-Nachschlagewerk. - **Keyboard Shortcuts** — die Übersicht aller Tastaturkürzel. - **Settings** — die Editor-Einstellungen (siehe [Einstellungen](#einstellungen)). ### Preview & Export - **Preview (Fullscreen)** — öffnet die gerenderte Vorschau bildschirmfüllend in einem Modal, mit eigenen Buttons für Copy, Save, PDF und Print. - Das angehängte Export-Menü bietet: **Copy HTML** (gerendertes HTML in die Zwischenablage), **Save as HTML** (vollständiges, eigenständiges HTML-Dokument inkl. eingebetteter Stile), **Save as PDF** und **Print**. Details unter [Export und Druck](#export-und-druck). ## Werkzeugleiste, Zeile 2 — Markdown-Formatierung ### Text formatting - **Headings** — Menü für Überschrift 1 bis 6. - **Bold** (`**text**`), **Italic** (`*text*`), **Strikethrough** (`~~text~~`). - **Subscript** (`~text~`), **Superscript** (`^text^`). - **Highlight** (`==text==`), **Inserted** (`++text++`). - **Inline code** (`` `code` ``). ### Block elements - **Lists** — Menü für **Unordered List**, **Ordered List**, **Task List** und **Definition List**. - **Blockquote** (`> quote`), **Code block**, **Insert table**, **Horizontal rule** (`---`). - **Insert Mermaid diagram** — fügt ein Mermaid-Grundgerüst ein. ### References & extras - **Insert link** (`[text](url)`), **Insert image** (`![alt](url)`). - **Footnote** (`[^1]`), **Emoji** (`:smile:`), **Abbreviation**. - **Math (KaTeX)** — Menü für **Math Inline** (`$…$`) und **Math Block** (`$$…$$`). ## Architektur, Speicherung und Datenschutz Der Editor ist im Kern eine **reine Client-Anwendung**: Rendern, automatisches Speichern und Export passieren ausschließlich in deinem Browser. Dein Dokument verlässt deinen Rechner nicht — es sei denn, du speicherst oder exportierst es bewusst als Datei. **Automatisches Speichern** legt den aktuellen Inhalt unter dem Schlüssel `md_editor_content` im `localStorage` deines Browsers ab; die Editor-Einstellungen liegen unter `md_editor_settings`. Beides bleibt zwischen Sitzungen erhalten und ist nach einem Reload wieder da. Das Status-Badge in der Editor-Kopfzeile zeigt grün, wenn der Stand gesichert wurde. Die **einzige** Funktion mit Serverkontakt ist **Load Markdown from URL**. Der Ablauf: 1. Das Tool-JavaScript holt zunächst über einen internen Token-Endpunkt (`p-api.php`) ein frisches, zeitlich begrenztes Token-Paar. 2. Damit ruft es den Fetch-Proxy (`p.php`) auf, der die von dir angegebene URL **serverseitig** per cURL lädt und den rohen Inhalt (typisch `text/markdown` oder `text/plain`) zurückgibt. Diese beiden Endpunkte sind **kein öffentliches API**, das du selbst aufrufen kannst — sie sind durch Token, Referer-Prüfung und tagesrotierende Geheimnisse gegen Fremdnutzung gehärtet und werden ausschließlich vom Tool selbst verwendet. Datenschutz-relevant ist vor allem: An den Server geht beim URL-Laden nur die **Ziel-URL**, niemals der Text, den du im Editor schreibst. Die Zielseite sieht einen Request vom JPKCom-Server, nicht deine IP-Adresse. Es gelten serverseitige Grenzen: - **SSRF-Schutz:** private, lokale und interne IP-Adressen werden blockiert; nur HTTP/HTTPS. - **Größenlimit:** maximal **950 KB** Antwort-Body. - **Timeout:** etwa **10 s** pro Abruf. ### Expert Mode (optional) Ist der optionale **LocalProxy** (Expert Mode) aktiv, läuft das URL-Laden stattdessen über einen selbst betriebenen lokalen Proxy auf `http://127.0.0.1:` — dann geht die Ziel-URL gar nicht erst an den JPKCom-Server. Die Einrichtung ist fortgeschritten und für den normalen Betrieb nicht nötig. ## Export und Druck Alle Exporte entstehen **lokal im Browser** aus der gerenderten Vorschau: - **Copy HTML** — kopiert das gerenderte HTML in die Zwischenablage. - **Save as HTML** — speichert ein vollständiges, eigenständiges HTML-Dokument; eingebettet sind die nötigen Stile (KaTeX-CSS, ein helles highlight.js-Theme, Mermaid-Layout), sodass die Datei für sich allein korrekt aussieht. - **Save as PDF** — rendert die Vorschau über html2pdf.js/html2canvas zu einer PDF-Datei; Code-Blöcke und Mermaid-Diagramme werden für den Druck in ein helles Thema umgeschaltet. - **Print** / **Print Markdown** — druckt die gerenderte Vorschau bzw. den rohen Markdown-Quelltext. Für den HTML- und PDF-Export gilt: Mermaid-Diagramme werden vor dem Export im hellen Thema neu gerendert, damit sie auf weißem Grund lesbar sind. ## Einstellungen Im **Settings**-Dialog stellst du den Editor ein; die Werte werden im `localStorage` gesichert: - **Font Size** — Schriftgröße in Pixeln (8–32, Standard 15). - **Tab Size** — 2, 4 (Standard) oder 8 Leerzeichen. - **Theme** — ACE-Editor-Theme: **Dracula** (Standard) oder **Monokai** (dunkel), **GitHub** oder **Solarized (Sepia)** (hell). - **Word wrap** — Zeilenumbruch (Standard: an). - **Show invisible characters** — unsichtbare Zeichen anzeigen. - **Show indent guides** — Einrückungslinien (Standard: an). - **Show line numbers** — Zeilennummern (Standard: an). - **Highlight active line** — aktive Zeile hervorheben (Standard: an). - **Reset to Defaults** — alle Werte zurücksetzen. ## Tastaturkürzel Der ACE-Editor bringt ein volles Set mit. Die wichtigsten: - **Formatierung:** `Strg`+`B` fett, `Strg`+`I` kursiv. - **Datei:** `Strg`+`S` als `.md` speichern, `Strg`+`O` Datei öffnen. - **Suche & Ersetzen:** `Strg`+`F` finden, `Strg`+`H` ersetzen, `F3` weiter, `Shift`+`F3` zurück. - **Bearbeiten:** `Strg`+`Z` rückgängig, `Strg`+`Y` wiederholen, `Strg`+`D` Zeile duplizieren, `Strg`+`Shift`+`K` Zeile löschen, `Tab`/`Shift`+`Tab` ein-/ausrücken, `Alt`+`↑`/`↓` Zeile verschieben. - **Navigation:** `Strg`+`G` zu Zeile springen, `Strg`+`Home`/`Strg`+`End` an Anfang/Ende, `Alt`+`←`/`→` wortweise. - **Ansicht:** `Escape` verlässt den Vollbildmodus. Die vollständige Liste steht im **Keyboard Shortcuts**-Dialog (Tools-Menü). ## Grenzen - Der Editor rendert nur, was markdown-it samt der geladenen Plugins kann — exotische Markdown-Dialekte oder GitHub-spezifische Features wie Alerts/Callouts sind nicht abgedeckt. - Wegen `breaks: true` wird **jeder** einfache Zeilenumbruch zum `
` — das weicht von striktem CommonMark/GFM ab (siehe [Tipps & Tricks](https://www.jpkc.com/db/tools/md/tips/)). - Wegen `html: true` wird eingebettetes HTML in der Vorschau gerendert; das ist gewollt, aber bedenke es beim Einfügen fremder Inhalte. - **Load Markdown from URL** ist auf öffentliche HTTP/HTTPS-Adressen begrenzt (kein `localhost`/Intranet), maximal 950 KB, ~10 s Timeout. - Die automatische Sicherung liegt nur in **diesem** Browser; ein anderer Browser oder ein gelöschter `localStorage` kennt deinen Text nicht. Für den Einstieg und die Zielgruppen siehe die [Übersichtsseite](https://www.jpkc.com/db/tools/md/). Konkrete Abläufe zeigen die [Beispiele](https://www.jpkc.com/db/tools/md/examples/), strategische Kniffe die [Tipps & Tricks](https://www.jpkc.com/db/tools/md/tips/). Ausprobieren kannst du alles direkt im [Tool](https://www.jpkc.com/tools/md/).