Guía
Markdown a HTML para email
Escribe en Markdown, envía HTML real. Aquí está por qué el email necesita una salida diferente a la de una página web, y cómo conseguirla.
Por qué el HTML normal se rompe en el email
Los clientes de correo no son navegadores. Muchos eliminan o ignoran los bloques <style>, las hojas de estilo externas y la mayoría del CSS moderno. El HTML que se ve perfecto en una página web puede llegar a una bandeja de entrada con fuentes por defecto, sin espaciado y con tablas rotas.
El enfoque confiable es poner los estilos directamente en cada elemento con el atributo style. Eso es lo que hace el modo de salida Compatible con email.
Qué cambia el conversor
Elegir Compatible con email (estilos en línea) en Opciones convierte tu Markdown como de costumbre, y luego añade estilos en línea a cada elemento:
<p style="margin:0 0 16px;font-size:16px;line-height:26px;color:#333333;">
Hello from Markdown.
</p>- Encabezados, párrafos, enlaces, listas, citas, código, tablas y líneas reciben tamaños, márgenes y colores explícitos.
- Las clases de resaltado de sintaxis se desactivan, porque los clientes de correo descartan los estilos basados en clases.
- La salida es un fragmento. Pégala en el cuerpo de tu editor de email o newsletter.
Cómo usarlo
- Abre el conversor con la salida Compatible con email seleccionada.
- Pega o escribe tu Markdown.
- Revisa la vista previa, y luego elige Copiar HTML.
- Pégalo en el editor HTML o de código fuente de tu herramienta de email.
Antes de enviar
- Usa URLs de imagen absolutas (
https://…) y escribe siempre texto alternativo. Las rutas relativas no se resuelven en una bandeja de entrada. - Envíate una prueba a ti mismo. Gmail, Outlook y Apple Mail renderizan cada uno de forma ligeramente diferente, especialmente Outlook en Windows.
- Manténlo simple. El contenido de una sola columna se convierte de forma confiable. Los diseños complejos de varias columnas necesitan una plantilla de email dedicada.
- Ten en cuenta el modo oscuro. Algunos clientes invierten los colores automáticamente, así que revisa el contraste en ambos.
- Deja la sanitización activada a menos que confíes plenamente en el origen de tu Markdown.
Lo que no hace
El conversor da estilo al contenido, no a los diseños: no hay sistema de encabezado, pie de página, botón o columnas. Úsalo para el cuerpo con mucho texto de un mensaje y combínalo con la plantilla de tu plataforma de email para el resto.