Conversor de Markdown a HTML
Convierte Markdown a HTML en tu navegador — GitHub Flavored Markdown completo, vista previa en vivo, resaltado de sintaxis. Exporta un fragmento, un documento completo o HTML en línea para correo. 100% privado, sin subir nada.
CSS personalizado
¿Qué es la conversión de Markdown a HTML?
La conversión de Markdown a HTML convierte un documento de texto plano escrito en Markdown — con `#` para encabezados, `**negrita**`, `- ` para listas y `[texto](url)` para enlaces — en el HTML que los navegadores, los sistemas de gestión de contenidos y los clientes de correo realmente muestran. Markdown está diseñado para ser legible tal cual y fácil de escribir, pero un navegador no entiende `# Encabezado`; entiende <h1>Encabezado</h1>. La conversión salva esa distancia.
Por dentro, un procesador de Markdown primero analiza tu fuente en un árbol de sintaxis abstracta (AST) — una representación estructurada donde un encabezado, un párrafo, una lista y un bloque de código son nodos distintos con su contenido y atributos. Luego serializa ese árbol a HTML, emitiendo las etiquetas y el anidamiento correctos. Trabajar a través de un AST, en lugar de intercambiar texto con expresiones regulares, es lo que permite al conversor manejar listas anidadas, tablas y HTML incrustado de forma correcta y predecible. Las dos gramáticas reconocidas son CommonMark, el estándar preciso, y GitHub Flavored Markdown (GFM), que lo extiende con tablas, listas de tareas, tachado y autoenlaces.
La razón por la que conviertes es que casi todo destino de publicación quiere HTML, no Markdown. Un generador de sitios estáticos, un campo de texto enriquecido de un CMS, una plantilla de correo y una pestaña del navegador renderizan todos HTML. Así que el flujo de trabajo típico es escribir en cómodo Markdown — un README, documentación, un borrador de blog, notas — y convertir a HTML en el momento de publicar. Esta herramienta hace esa conversión localmente y muestra una vista previa en vivo, para que veas el resultado renderizado y puedas copiar el HTML exacto en la forma que necesites: un fragmento, una página completa o marcado con estilos en línea listo para correo.
La operación inversa — HTML de vuelta a Markdown — es igual de útil cuando estás migrando contenido web existente a un sistema basado en Markdown. Para eso, cambia a la pestaña HTML → Markdown o abre el conversor de HTML a Markdown dedicado.
Markdown in:
# Release Notes
We shipped **tables** and `code`:
| Feature | Status |
| ------- | ------ |
| GFM | Done |
- [x] Parse to an AST
- [ ] Profit
HTML out:
<h1>Release Notes</h1>
<p>We shipped <strong>tables</strong> and <code>code</code>:</p>
<table>
<thead><tr><th>Feature</th><th>Status</th></tr></thead>
<tbody><tr><td>GFM</td><td>Done</td></tr></tbody>
</table>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" checked disabled> Parse to an AST</li>
<li class="task-list-item"><input type="checkbox" disabled> Profit</li>
</ul> Características principales
Vista previa en panel dividido en vivo
Escribe Markdown a la izquierda y míralo renderizar a la derecha en tiempo real, con la salida HTML construyéndose debajo a medida que avanzas. La vista previa se renderiza en un iframe en entorno aislado, así que lo que ves es lo que mostrará un navegador — y los scripts pegados no pueden ejecutarse.
GitHub Flavored Markdown completo
No solo CommonMark — el superconjunto GFM completo: tablas con barras, listas de tareas (`- [x]`), tachado (`~~`), URLs autoenlazadas y bloques de código delimitados. Un README o una issue escritos para GitHub se renderizan aquí exactamente como lo hacen allí.
Resaltado de sintaxis
Etiqueta un bloque de código delimitado con su lenguaje (```js, ```python, ```sql) y el conversor lo resalta, envolviendo los tokens en spans con una clase de lenguaje en el elemento <code>. Combínalo con una hoja de estilos de resaltado en tu página para el color.
Tres formatos de salida
Exporta un fragmento HTML (marcado del cuerpo para una plantilla o CMS), un Documento completo (una página autónoma que puedes guardar como .html), o HTML Correo en línea con los estilos movidos a cada elemento para que Outlook y otros clientes lo rendericen correctamente.
Panel CSS personalizado
Inyecta tu propio CSS en la vista previa en vivo para igualar la tipografía de un sitio o imitar el estilo de README de GitHub. Escribe reglas como h1 { color: #0969da; } y la vista previa se actualiza al instante, sin tocar el HTML limpio que copias.
Chuleta de sintaxis GFM
Una referencia rápida de la sintaxis que produce HTML: `# H1` → encabezado, `**negrita**` → <strong>, `*cursiva*` → <em>, `- elemento` → lista, `1. elemento` → lista ordenada, `[texto](url)` → enlace, `` `código` `` → código en línea, ` ```lang ` → código delimitado, `> cita` → cita en bloque, `| a | b |` → tabla, `- [ ]` → lista de tareas, `~~texto~~` → tachado.
100% privado, en el navegador
Cada conversión se ejecuta localmente con JavaScript — tu Markdown y HTML nunca salen de tu dispositivo, nunca llegan a un servidor y funcionan sin conexión tras cargar la página. Seguro para documentación sin publicar, READMEs internos y notas de versión bajo embargo.
Ejemplos
Tabla GFM a una <table> de HTML
| Herramienta | Velocidad | | ----------- | --------- | | GFM | Rápida |
<table> <thead><tr><th>Herramienta</th><th>Velocidad</th></tr></thead> <tbody><tr><td>GFM</td><td>Rápida</td></tr></tbody> </table>
Las tablas con barras verticales de GitHub Flavored Markdown no forman parte del CommonMark plano, pero este conversor las entiende y emite una <table> semántica correcta con <thead> y <tbody> — lista para darle estilo o pegarla en un CMS.
Lista de tareas a HTML con casillas de verificación
- [x] Escribir el README - [ ] Convertirlo a HTML
<ul class="contains-task-list"> <li class="task-list-item"><input type="checkbox" checked disabled> Escribir el README</li> <li class="task-list-item"><input type="checkbox" disabled> Convertirlo a HTML</li> </ul>
La sintaxis de lista de tareas de GFM `- [x]` / `- [ ]` se convierte en casillas de verificación reales y deshabilitadas, exactamente como GitHub renderiza una lista de comprobación — así un README copiado se ve igual en tu propia página.
Bloque de código delimitado a <pre><code> resaltado
```js const html = md.render(src) ```
<pre><code class="language-js"><span class="hljs-keyword">const</span> html = md.render(src) </code></pre>
Añade un lenguaje tras la apertura del bloque y el conversor aplica resaltado de sintaxis, envolviendo los tokens en spans con una clase language-js en el elemento <code>. Combínalo con una hoja de estilos de resaltado y el código queda coloreado.
Un README a un documento HTML completo
# Mi Proyecto Una breve descripción y un [enlace](https://example.com).
<!doctype html> <html lang="es"> <head><meta charset="utf-8"><title>Mi Proyecto</title></head> <body> <h1>Mi Proyecto</h1> <p>Una breve descripción y un <a href="https://example.com">enlace</a>.</p> </body> </html>
Cambia la salida a Documento completo y el conversor envuelve el HTML renderizado en una página completa con un <head> y charset — un archivo .html autónomo que puedes abrir en cualquier navegador o descargar directamente.
Cómo convertir Markdown a HTML
- 1
Escribe o pega tu Markdown
Suelta tu Markdown — un README, notas de versión, el cuerpo de una issue — en el panel de entrada. Se admite GitHub Flavored Markdown completo: tablas, listas de tareas, tachado, autoenlaces y bloques de código delimitados. La vista previa en vivo y la salida HTML se actualizan a medida que escribes, todo en tu navegador.
- 2
Elige un formato de salida
Elige Fragmento HTML para pegar en una plantilla o CMS, Documento completo para una página .html autónoma, o Correo en línea para HTML con estilos en línea que sobreviva a Outlook. Añade etiquetas de lenguaje a los bloques de código para el resaltado de sintaxis, y usa el panel CSS personalizado para dar estilo a la vista previa.
- 3
Copia o descarga
Haz clic en Copiar para llevarte el HTML, o en Descargar para guardarlo como archivo. Para invertir la conversión, cambia a la pestaña HTML → Markdown y pega tu HTML para obtener Markdown limpio de vuelta.
Errores comunes
HTML sin escapar tragado en la prosa
Markdown deja pasar el HTML en bruto, así que un corchete angular que querías como texto — como al escribir sobre un <Component> o un genérico List<T> — se analiza como una etiqueta HTML y desaparece de la salida. Escapa el corchete con una barra invertida o una entidad HTML, o envuelve el texto en un span de código para que se renderice literalmente.
Use the <Header> component to wrap pages. <!-- <Header> is parsed as a tag and vanishes -->
Use the `<Header>` component to wrap pages. <!-- backticks keep it literal: renders <Header> -->
Barras de tabla desalineadas o mal formadas
Una tabla GFM necesita una fila de encabezado, una fila delimitadora de guiones y al menos una barra por fila. Olvidar la fila delimitadora, o tener un número de columnas distinto al del encabezado, rompe la tabla — recae en un párrafo plano de barras. Las celdas no necesitan alinearse visualmente, pero cada fila debe tener el mismo número de columnas.
| Name | Role | | Alice | Admin | <!-- no |---|---| delimiter row: not a table -->
| Name | Role | | ---- | ---- | | Alice | Admin | <!-- delimiter row present: renders a table -->
Bloque de código sin lenguaje
Un bloque de código delimitado sin cadena de información de lenguaje se renderiza como un bloque <pre><code> sin clase de lenguaje, así que no obtiene resaltado de sintaxis. El código sigue apareciendo, solo que monocromo. Añade el lenguaje justo después de las comillas invertidas de apertura para habilitar el resaltado; un espacio entre las comillas y el nombre lo deshabilita.
``` const x = 1 ``` <!-- no language → no highlighting -->
```js const x = 1 ``` <!-- language-js → highlighted -->
Usar un fragmento donde se necesita un documento completo
Copiar la salida de fragmento HTML y guardarla directamente como archivo .html produce una página sin doctype, sin charset y sin <html>/<head>/<body>. Los navegadores a menudo la renderizarán de todos modos, pero el modo quirks y la falta de charset pueden romper los caracteres acentuados y el diseño. Cuando el HTML debe ser autónomo, cambia al formato Documento completo.
<h1>Title</h1> <p>Saved as page.html — no doctype, no charset.</p>
<!doctype html> <html lang="en"><head><meta charset="utf-8"><title>Title</title></head> <body><h1>Title</h1><p>Complete, standalone page.</p></body></html>
Casos de uso comunes
- Publicar en un sitio estático o CMS
- Escribe tu contenido en Markdown, conviértelo a un fragmento HTML y pégalo en una plantilla de sitio estático o un campo de texto enriquecido de un CMS. Obtienes marcado semántico limpio — encabezados, listas, tablas — sin que el envoltorio de la página estorbe.
- Previsualizar un README antes de hacer push
- Pega tu README.md y mira la vista previa en vivo renderizarlo con GFM completo — tablas, listas de tareas, código delimitado — para que detectes una tabla rota o un bloque de código sin cerrar antes del commit, no después de que GitHub se lo muestre al mundo.
- Convertir notas en una página web compartible
- Notas de una reunión, un documento de diseño o un borrador escrito en Markdown se convierte en una página HTML completa con un clic. Elige Documento completo, descarga el archivo .html y tendrás algo que puedes abrir en cualquier navegador o alojar donde sea.
- Crear HTML con estilos en línea seguro para correo
- Los clientes de correo eliminan los bloques <style>, así que escribe tu mensaje en Markdown y exporta el formato Correo en línea, que mueve el CSS a cada elemento como un atributo style. El resultado se renderiza correctamente en Outlook y otros clientes que ignoran los estilos a nivel de documento.
- Convertir un archivo .md a un .html descargable
- ¿Necesitas una versión HTML autónoma y sin conexión de un documento Markdown? Pégalo, elige Documento completo y Descargar — obtienes un archivo .html autónomo con un doctype y charset adecuados, sin herramienta de compilación ni línea de comandos.
- Incrustar documentación renderizada en una app
- ¿Generas documentación, registros de cambios o contenido de ayuda a partir de Markdown almacenado en tu repositorio? Usa esta herramienta para ver exactamente qué HTML produce una fuente Markdown dada, así puedes igualar el renderizador de tu app y dar estilo a la salida para que encaje.
Detalles técnicos
- CommonMark frente a GitHub Flavored Markdown
- CommonMark es la especificación de Markdown estricta y sin ambigüedades que define exactamente cómo se analizan encabezados, énfasis, listas, enlaces y bloques de código. GitHub Flavored Markdown (GFM) es un superconjunto estricto: conserva todo lo que CommonMark define y añade cuatro extensiones — tablas con barras, elementos de lista de tareas (`- [x]`), tachado (`~~texto~~`) y URLs desnudas autoenlazadas. Como GFM solo añade funciones, cualquier documento CommonMark válido también es GFM válido. Este conversor implementa el superconjunto GFM, así que los documentos escritos para cualquiera de las dos gramáticas se renderizan correctamente.
- Renderizado en entorno aislado seguro frente a XSS
- Markdown permite intencionadamente HTML en bruto incrustado, lo que significa que un documento Markdown puede contener una etiqueta <script> o un manejador de eventos como onerror. La vista previa en vivo se defiende de esto renderizando dentro de un <iframe sandbox=""> con el scripting deshabilitado, así que el contenido activo de tu entrada no puede ejecutarse mientras lo previsualizas — importante cuando conviertes Markdown de una fuente no confiable. El HTML serializado que la herramienta produce es la representación fiel de tu entrada; si piensas publicar HTML derivado de Markdown no confiable, pásalo por un saneador como DOMPurify en tu servidor antes de servirlo.
- Compatibilidad con HTML de correo
- El HTML de correo se renderiza mediante un mosaico de motores con un soporte de CSS notoriamente limitado. Outlook en Windows usa el motor de renderizado de Word e ignora los bloques <style> en la cabecera del documento, así que cualquier estilo basado en clases desaparece en silencio; el enfoque fiable son los atributos style en línea en cada elemento, que es lo que produce la salida Correo en línea. Las imágenes son otra trampa: muchos clientes bloquean las imágenes remotas hasta que el destinatario lo permite, así que incrustar imágenes pequeñas como data URI las renderiza de inmediato, mientras que las imágenes remotas grandes puede que no aparezcan en absoluto. Mantén el marcado simple y pruébalo en tus clientes de destino.
- Resaltado síncrono en el navegador
- Cuando un bloque de código delimitado lleva una cadena de información de lenguaje (```js), el conversor ejecuta un resaltador síncrono sobre su contenido, tokenizando la fuente y envolviendo cada token en un <span> con una clase como hljs-keyword o hljs-string, además de una clase language-js en el elemento <code>. El resaltado es solo estructural — añade clases, no colores — así que la página de destino necesita una hoja de estilos de resaltado coincidente para renderizar la paleta. Como se ejecuta de forma síncrona en el navegador, el HTML resaltado aparece en el instante en que escribes, sin llamada de red.
Buenas prácticas
- Elige el formato de salida según el destino
- Ajusta el formato a dónde va el HTML. Un campo de CMS o una plantilla ya tienen un envoltorio de página, así que pega un fragmento HTML. Un archivo que quieras abrir directamente en un navegador necesita un Documento completo con doctype y charset. Un correo necesita Correo en línea para que los estilos sobrevivan a los clientes que eliminan los bloques <style>. Pegar la forma incorrecta es el error evitable más común.
- Etiqueta siempre los bloques de código con un lenguaje
- Escribe el lenguaje justo después de las comillas invertidas de apertura — ```js, ```python, ```sql — sin espacio, para que el conversor pueda resaltar el bloque y añadir la clase de lenguaje correcta. Un bloque desnudo produce código sin estilo ni resaltado. Usa un lenguaje que el resaltador reconozca; un nombre desconocido o mal escrito recae en texto plano.
- Sanea antes de publicar Markdown no confiable
- La vista previa está en entorno aislado, pero el HTML que la herramienta emite es una representación fiel — incluyendo cualquier HTML en bruto o <script> de la entrada. Si ese Markdown vino de usuarios u otra fuente no confiable y piensas servir el resultado a otras personas, pasa primero el HTML por un saneador como DOMPurify en tu servidor. El entorno aislado te protege a ti mientras conviertes, no a tus visitantes después de publicar.
- Mantén el HTML de correo simple y en línea
- Para el correo, prefiere el formato Correo en línea, mantén tu diseño simple y evita las funciones de CSS que Outlook y otros clientes descartan. Incrusta las imágenes pequeñas como data URI para que se rendericen incluso cuando las imágenes remotas están bloqueadas, y envíate siempre una prueba antes de un envío más amplio — el renderizado de correo es el destino menos indulgente que tiene el HTML.
- Escapa los caracteres HTML literales en el texto
- Si quieres que un < o un & literal aparezca como texto en lugar de interpretarse como etiqueta o entidad, escápalo con una barra invertida (\<) o una entidad HTML (<). Markdown deja pasar el HTML en bruto, así que un <ejemplo> sin escapar en la prosa puede ser tragado como una etiqueta desconocida y desaparecer de la salida renderizada.
Preguntas frecuentes
¿Es compatible con GitHub Flavored Markdown (GFM)?
¿Cómo obtengo HTML con estilos en línea seguro para correo?
¿Cuál es la diferencia entre un fragmento HTML y un documento completo?
¿Es seguro frente a XSS previsualizar el HTML renderizado?
¿Puedo añadir mi propio CSS a la vista previa?
¿Se suben mis archivos o mi texto a un servidor?
¿Funciona sin conexión?
¿Cómo convierto un archivo Markdown (.md) a un archivo HTML?
¿Por qué no se resalta mi bloque de código?
¿Puedo convertir HTML de vuelta a Markdown?
Herramientas relacionadas
Ver todas las herramientas →Decodificador y Codificador Base64
Codificación y Formato
Decodifica y codifica Base64 online de forma gratuita. Conversión en tiempo real con soporte completo de UTF-8 y emojis. 100% privado — funciona en tu navegador. Sin registro.
Conversor de Base64 a Imagen
Codificación y Formato
Decodifica una cadena Base64 o data URI de vuelta a una imagen en tu navegador. Previsualiza, lee dimensiones y MIME, luego descarga como PNG, JPG, GIF, SVG. Sin subir.
Convertidor de CSV a JSON
Codificación y Formato
Convierte CSV a JSON en tu navegador. RFC 4180, inferencia de tipos, fila de cabecera, seguro para big-int. 100% privado, sin carga.
Conversor de HTML a Markdown
Codificación y Formato
Convierte HTML a Markdown limpio en tu navegador — tablas GFM, listas de tareas y enlaces. Elige encabezados ATX/Setext y enlaces en línea o por referencia. Ideal para migrar contenido web o alimentar LLMs. 100% privado.
Conversor de Imagen a Base64
Codificación y Formato
Convierte imágenes a data URI Base64 en tu navegador — PNG, JPG, GIF, WebP, SVG, ICO. Copia salida HTML, CSS, Markdown y JSON. 100% privado, sin subir nada.
JSON Diff (Comparar)
Codificación y Formato
Compara dos archivos JSON al instante en tu navegador. Resaltado lado a lado, salida RFC 6902 JSON Patch, ignora campos ruidosos como marcas de tiempo e IDs. 100% privado, sin carga.