Markdown a HTML
Pega Markdown a la izquierda y verás el HTML renderizado (o su código fuente) a la derecha. Se ejecuta en vivo en tu navegador.
- Escribe o pega Markdown en el panel izquierdo.
- La vista previa de la derecha se actualiza a medida que escribes.
- Cambia Vista a Código HTML para ver las etiquetas en lugar del resultado renderizado.
- Pulsa Copiar HTML para ponerlo en el portapapeles, o Descargar .html para un archivo independiente.
¿Qué hace?
Esta herramienta convierte Markdown a HTML usando CommonMark más GitHub Flavored Markdown (GFM), con saltos suaves renderizados como <br>. Puedes ver la vista renderizada o cambiar al código HTML para inspeccionar las etiquetas generadas. El resultado es apto para pegar en plataformas de blog, editores de correo o cualquier lugar que acepte HTML.
Ejemplo
Markdown de entrada:
# Release notes
We shipped **three** things this week:
- [x] Faster cold start
- [ ] Dark mode (next week)
See the [docs](https://example.com/docs) for details.
```js
console.log("hello");
``` Código HTML renderizado:
<h1>Release notes</h1>
<p>We shipped <strong>three</strong> things this week:</p>
<ul>
<li><input type="checkbox" checked disabled> Faster cold start</li>
<li><input type="checkbox" disabled> Dark mode (next week)</li>
</ul>
<p>See the <a href="https://example.com/docs">docs</a> for details.</p>
<pre><code class="language-js">console.log("hello");
</code></pre> Errores comunes y advertencias
La mayoría de sorpresas al renderizar Markdown vienen de un puñado de trampas de sintaxis. Si la vista previa se ve rara, normalmente es una de estas.
- Falta línea en blanco antes de una lista. "Introducción\n- ítem" se renderiza como un solo párrafo. Deja una línea en blanco entre la introducción y el primer elemento de la lista.
- Bloque de código sangrado cuando querías un párrafo. Cuatro espacios iniciales convierten cualquier línea en un bloque de código. Quita la sangría o usa un bloque ``` explícito.
- Tabla rota. Cada tabla GFM necesita una fila separadora (| --- | --- |) con al menos tres guiones por columna y la misma cantidad de barras verticales en cada fila.
- Enlace con espacios en la URL. [clic](mi pagina.html) rompe el parser. Codifica el espacio como %20 o usa ángulos: <mi pagina.html>.
- Asteriscos dentro de palabras. wild*card puede renderizarse como énfasis o no, según el contexto. Escápalo con barra invertida: wild\*card.
- Escape HTML dentro de bloques de código. Los fragmentos pegados con < aparecen literales porque ya están escapados. Pega el origen sin escapar.
Preguntas frecuentes
¿Qué sabor de Markdown admite?
CommonMark más GitHub Flavored Markdown (GFM). Eso cubre tablas, bloques de código delimitados, listas de tareas, tachado y URLs autolinkadas. Los saltos dentro de un párrafo se convierten en etiquetas <br> porque la opción breaks está activa — coincide con cómo se renderizan los comentarios en GitHub y la mayoría de chats.
¿Se sanea el HTML dentro de mi Markdown?
No. La vista renderizada deja pasar el HTML en bruto por defecto. Así siguen funcionando cosas como <details> o <kbd>. No pegues Markdown no confiable y copies el resultado a un sitio público sin pasarlo primero por un sanitizador como DOMPurify.
¿Admite notas al pie, matemáticas o diagramas?
No. Esto es GFM puro. Las notas al pie, las matemáticas (KaTeX/MathJax) y los diagramas Mermaid son extensiones de GitHub o de plataforma y no se renderizan aquí. Si los necesitas, usa un renderizador de Markdown con los plugins adecuados o pega el resultado en una plataforma que los renderice.
¿Qué pasa cuando hago clic en Copiar HTML?
El código HTML renderizado se escribe en el portapapeles mediante la API Clipboard. Obtienes el HTML sin el envoltorio de la página, solo las etiquetas que representan tu Markdown. Pégalo en un CMS, un editor de correo o directamente en un archivo. No se crean archivos en disco.
¿Por qué mis tablas se ven desalineadas?
Las tablas GFM necesitan una fila de encabezado, una fila separadora con al menos tres guiones por columna y barras verticales entre celdas. Si falta una barra o la separadora solo tiene dos guiones, falla silenciosamente. Cambia a la vista de código HTML para comprobar si realmente se generó una <table>.
¿Guardan el Markdown que pego aquí?
No. No guardamos el Markdown que escribes o pegas, ni el HTML renderizado que descargas. Todo se descarta en cuanto cierras o actualizas la pestaña — sin registros, sin rastro de lo que escribiste. Puedes verificarlo en las herramientas de desarrollo de tu navegador.