Du kopierst formatierten Text aus einem dunklen Editor (z. B. Claude Code, VS Code, ein Terminal) und fügst ihn in Gmail ein — und plötzlich hängt der schwarze Hintergrund und die helle Textfarbe mit drin. 🙄
Der Grund: Beim Kopieren landet nicht nur Text auf der Zwischenablage, sondern HTML mit inline-Styles (background-color, color, font-family aus dem Theme). Gmail übernimmt dieses HTML eins zu eins.
mdpro legt stattdessen bereinigtes, semantisches HTML auf die Zwischenablage — nur Struktur-Tags (Überschriften, Fett, Listen, Links, Tabellen), keine Farben, keine Hintergründe, keine Klassen. Beim Einfügen erbt der Text automatisch das Styling des Ziels. Sauber. Jedes Mal.
Der Clou: Der Copy-Button liest nicht die gerenderte Vorschau (die würde wieder CSS mitschleppen), sondern baut das Ausgabe-HTML von Hand aus dem Markdown und filtert es gegen eine strikte Tag-/Attribut-Whitelist.
| Feature | Was es macht | |
|---|---|---|
| 📋 | Sauber kopieren | Markdown → bereinigtes text/html + text/plain auf der Zwischenablage |
| 🎯 | Ziel-Presets | Gmail · Outlook · Slack · Notion · Nur Text — jedes Ziel bekommt das passende Format |
| 🔄 | Reverse-Modus | Formatierten Text einfügen → sauberes Markdown zurück |
| 🎚️ | Styling-Level | Minimal (nur Struktur) oder Basis-Styling (dezente Rahmen für Tabellen/Code) |
| 📐 | Gmail-taugliche Tabellen & Code | Minimale, light-mode-sichere Inline-Rahmen, damit Tabellen & Code-Blöcke nicht nackt ankommen |
| 🧩 | Snippet-Bibliothek | Häufige Bausteine (Signaturen, Vorlagen) speichern & mit einem Klick einfügen |
| 📊 | Live-Statusleiste | Wörter, Zeichen, geschätzte Lesezeit |
| 📥 | Import / Export / Drag & Drop | .md/.html-Dateien öffnen, als .md oder .html exportieren, Dateien reinziehen |
| 🔗 | Teilen per Link | Entwurf wird base64-kodiert in die URL gepackt — kein Backend nötig |
| 🌗 | Light / Dark + PWA | Theme-Umschalter, installierbar, offline-fähig |
Plus: ⌘/Ctrl + Enter zum Kopieren und automatisches Speichern des letzten Textes (localStorage).
Keine Abhängigkeiten, kein Build. Einfach einen kleinen Server starten (die Clipboard-API braucht localhost oder https — file:// reicht nicht):
git clone https://github.com/<user>/mdpro.git
cd mdpro
python3 -m http.server 8000
# → http://localhost:8000Dann: Markdown links eingeben → Ziel wählen → Sauber kopieren → in Gmail einfügen. Fertig.
Statische Site, die Vercel automatisch erkennt:
vercel # Preview
vercel --prod # ProductionMarkdown ──marked──► HTML ──Whitelist-Filter──► sauberes HTML ──► Zwischenablage
│
└─ entfernt: style, class, bgcolor, color,
width, align, <script>, Kommentare, …
behält: h1–h3, p, strong/em, ul/ol/li,
a[href], code, pre, blockquote, table, …
Der Reverse-Modus dreht das um (turndown): eingefügtes HTML wird erst gegen dieselbe Whitelist gefiltert und dann in Markdown umgewandelt.
mdpro/
├── index.html # Layout & Steuerelemente
├── styles.css # App-Styling (Light/Dark) — betrifft NICHT das kopierte HTML
├── app.js # Rendering, Clean-Copy, Presets, Reverse, Snippets, Share …
├── manifest.json # PWA-Manifest
├── sw.js # Service Worker (offline, cache-first)
├── icon.svg # App-Icon
└── vendor/
├── marked.min.js # Markdown → HTML (lokal, kein CDN)
└── turndown.min.js # HTML → Markdown (lokal, kein CDN)
Reines HTML + CSS + Vanilla JS. Kein Framework, kein Bundler, kein npm-install. Zwei Libs lokal gevendored, damit alles offline läuft. Nutzt die moderne ClipboardItem-API (mit execCommand-Fallback für ältere Browser).
MIT