Anleitung

Markdown zu HTML für E-Mail

Schreiben Sie in Markdown, versenden Sie echtes HTML. Hier erfahren Sie, warum E-Mail eine andere Ausgabe braucht als eine Webseite, und wie Sie sie bekommen.

Warum normales HTML in E-Mails kaputtgeht

E-Mail-Programme sind keine Browser. Viele entfernen oder ignorieren <style>-Blöcke, externe Stylesheets und die meisten modernen CSS-Funktionen. HTML, das auf einer Webseite perfekt aussieht, kann in einem Postfach mit Standardschriften, ohne Abstände und mit kaputten Tabellen ankommen.

Der verlässliche Ansatz ist, Stile mit dem style-Attribut direkt auf jedes Element zu setzen. Genau das tut der Ausgabemodus E-Mail-sicher.

Was der Konverter ändert

Wenn Sie in den Optionen E-Mail-sicher (Inline-Stile) wählen, wird Ihr Markdown wie gewohnt konvertiert und erhält anschließend für jedes Element Inline-Stile:

<p style="margin:0 0 16px;font-size:16px;line-height:26px;color:#333333;">
  Hello from Markdown.
</p>

Überschriften, Absätze, Links, Listen, Zitate, Code, Tabellen und Trennlinien erhalten explizite Größen, Abstände und Farben.
Klassen für die Syntaxhervorhebung werden deaktiviert, weil E-Mail-Programme klassenbasierte Stile verwerfen.
Die Ausgabe ist ein Fragment. Fügen Sie es in den Body Ihres E-Mail- oder Newsletter-Editors ein.

So verwenden Sie es

Öffnen Sie den Konverter mit ausgewählter E-Mail-sicherer Ausgabe.
Fügen Sie Ihr Markdown ein oder tippen Sie es.
Prüfen Sie die Vorschau und wählen Sie dann HTML kopieren.
Fügen Sie es in den HTML- oder Quelltext-Editor Ihres E-Mail-Tools ein.

Vor dem Versand

Verwenden Sie absolute Bild-URLs (https://…) und schreiben Sie immer Alt-Text. Relative Pfade lassen sich in einem Postfach nicht auflösen.
Schicken Sie sich selbst einen Test. Gmail, Outlook und Apple Mail stellen jeweils leicht unterschiedlich dar, besonders Outlook unter Windows.
Halten Sie es einfach. Einspaltige Inhalte werden zuverlässig konvertiert. Komplexe mehrspaltige Layouts brauchen eine dedizierte E-Mail-Vorlage.
Denken Sie an den Dunkelmodus. Manche Clients invertieren Farben automatisch, prüfen Sie also den Kontrast in beiden Modi.
Lassen Sie die Bereinigung aktiviert, es sei denn, Sie vertrauen der Quelle Ihres Markdowns vollständig.

Was er nicht tut

Der Konverter gestaltet Inhalte, keine Layouts: Es gibt kein Header-, Footer-, Button- oder Spaltensystem. Nutzen Sie ihn für den textlastigen Hauptteil einer Nachricht und kombinieren Sie ihn für den Rest mit der Vorlage Ihrer E-Mail-Plattform.

Für E-Mail konvertieren Markdown-Spickzettel