HTML und Markdown, beide Richtungen, an einem Ort
Zwei Formate, zwischen denen Engineers täglich hin- und herhüpfen. Markdown für READMEs, Docs, GitHub-Issues, Chat. HTML für echte Webseiten, Email-Templates, alles, was ein Browser rendert. Die Übersetzung dazwischen ist von Hand mühsam und mit Regex gefährlich, Block-Elemente verschachteln sich, Inline-Tags überlappen, Code-Fences fressen Backticks. Dieses Tool lässt die Konvertierung durch echte Parser auf dem Server laufen: `turndown` für HTML zu Markdown, `marked` für Markdown zu HTML.
Content links pasten, den konvertierten Output rechts erscheinen sehen mit einer Live-Vorschau des gerenderten Ergebnisses. GitHub Flavored Markdown (Tabellen, Fenced-Code, Strikethrough) toggeln, rohes HTML behalten oder strippen beim Gang zu Markdown, Smart-Quotes für saubere Typografie anschalten.
Alles läuft serverseitig, bewusst so: ein echtes DOM und ein echter Markdown-Lexer schlagen browser-seitige Regex jeden Tag, und der Output wird sanitized, bevor er die Route verlässt, damit die Vorschau nie ein verirrtes `<script>`-Tag hosten kann.
So nutzt du das Tool
- Richtung oben wählen: HTML zu Markdown zum Portieren eines Blog-Posts in eine README, oder Markdown zu HTML zum Herausziehen eines Email-Bodys aus einem Docs-File.
- Deine Quelle in die Input-Box links pasten oder Load sample klicken, um ein laufendes Beispiel mit Tabelle und Code-Block zu sehen.
- Die Output-Box updated nach einer kurzen Pause (etwa 350 ms), lang genug zum Bundeln von Tastenanschlägen, kurz genug für Live-Gefühl.
- Den GitHub Flavored Markdown-Switch nutzen, um Tabellen, Fenced-Code-Blöcke und Task-Lists zu aktivieren. Lass es an für fast jeden modernen Use-Case.
- Raw-HTML erhalten anschalten beim HTML-zu-Markdown-Gang, wenn deine Quelle Tags nutzt, die Markdown nicht ausdrücken kann (z. B. `<kbd>`, `<sup>`, `<details>`); sie bleiben wörtlich statt gedroppt zu werden.
- Smart-Quotes tauscht gerade Anführungszeichen gegen runde und drei Punkte gegen einen echten Ellipsis. Aus, wenn dein Output in einen Editor geht, der Unicode hasst.
- Swap direction klicken für einen Round-Trip: der aktuelle Output wird zum neuen Input und die Richtung flippt. Nützlich, um zu prüfen, dass nichts verloren ging.
- Copy ins Clipboard oder Paste holt HTML oder Markdown direkt aus dem Clipboard, ohne die Seite zu verlassen.
Wann das nützlich ist
Sechs konkrete Situationen, in denen das echt Zeit spart:
- Blog-Post in eine README importieren. Du hast einen langen Artikel im CMS geschrieben (Output ist HTML), du willst ihn als Markdown im Repo. Pasten, HTML zu Markdown wählen, kopieren. Tabellen und Code-Blöcke überleben.
- Docs-Seite als Email schicken. Du hast ein Markdown-File im Repo, dein Transactional-Email-Service will HTML. Einmal konvertieren, HTML-Body ins Template pasten.
- Rich-Text-Paste säubern. Word, Notion und Google Docs pasten alle aufgeblähtes HTML mit Inline-Styles, Span-Wrappers und Klassen-Suppe. Hier pasten, HTML zu Markdown wählen, einen sauberen String nur mit Struktur kriegen: Headings, Listen, Links, Code.
- CMS migrieren. Alte Seite exportiert HTML, neue Seite (Hugo, Astro, Next.js-Content-Collection) liest Markdown. Bulk-konvertieren Seite für Seite, Struktur behalten, Inline-Styles wegwerfen.
- GitHub-Issues mit Tabellen schreiben. Du hast eine Vergleichstabelle irgendwo in HTML, willst sie als richtige GFM-Tabelle in einem Issue. Pasten, konvertieren, in GitHub pasten. Das Pipe-Zeichen-Chaos wird für dich erzeugt.
- Markdown-Rendering prüfen. Du hast eine lange README geschrieben und willst sehen, wie sie auf GitHub aussieht. In Markdown zu HTML pasten, Live-Vorschau anschauen. Bricht ein Code-Fence oder ist eine Tabelle schief, sagt es dir die Vorschau sofort. Um die README selbst zusammenzusetzen, geh zum README-Builder; für reine Tabellen-Arbeit ist der Markdown-Tabellen-Editor schneller; und für lange Docs nimm ein Markdown-Inhaltsverzeichnis.