Exportar Markdown a HTML

Markdown es la forma más rápida de escribir contenido estructurado, pero la web funciona con HTML. El puente entre ambos debería ser instantáneo y seguro. Abre el Editor Markdown para escribir Markdown, ver el HTML renderizarse en vivo y exportar una salida limpia y sanitizada — todo en tu navegador.

TL;DR

Escribe Markdown, ve el HTML al instante, cópialo o descárgalo.

• Vista previa en vivo mientras escribes — tres modos de vista (Dividido, Editor, Vista previa) para que puedas editar, leer o hacer ambas cosas a la vez.
• HTML limpio y seguro — la salida se sanitiza con DOMPurify, así que es seguro pegarla en un CMS o un correo.
• Copiar o descargar — copia el HTML al portapapeles o guarda un archivo .html independiente localmente.

Qué es Markdown

Markdown es un lenguaje de marcado ligero para dar formato al texto con símbolos sencillos y legibles. Un # crea un encabezado, los guiones hacen una lista, los asteriscos dan énfasis, y una URL normal puede convertirse en un enlace. El código fuente se mantiene casi como texto plano, por eso la gente lo elige apenas escribe más de un párrafo de contenido estructurado.

Se usa en todas partes donde se escribe contenido técnico — archivos README, sitios de documentación, artículos de blog, notas de versión y wikis internas. La razón es simple: puedes escribir y leer Markdown sin ninguna herramienta, y se convierte a HTML enriquecido cuando lo necesitas.

Por dentro, esta herramienta renderiza Markdown con el motor markdown-it siguiendo la especificación CommonMark — la interpretación estandarizada y bien definida de Markdown. Eso significa una salida predecible y consistente, en lugar de las sorpresas dialecto a dialecto que tenían las antiguas variantes de Markdown.

La vista previa y los modos de vista

A medida que escribes, el HTML se renderiza en vivo en la vista previa. Tres modos de vista te permiten controlar cuánto ves:

• Dividido — editor a la izquierda, vista previa renderizada a la derecha. Es el modo predeterminado y el mejor mientras escribes, porque ves el código fuente y el resultado juntos.
• Editor — solo la entrada Markdown, a todo el ancho. Útil cuando te concentras en escribir y no necesitas la vista previa.
• Vista previa — solo el HTML renderizado. Útil para leer el resultado terminado o mostrárselo a alguien.

Cambia de modo en cualquier momento. La salida renderizada se actualiza con cada pulsación en los modos Dividido y Vista previa.

Paso a paso: exportar HTML

El Editor Markdown funciona totalmente en tu navegador. Este es el flujo:

1. Escribe o pega tu Markdown en el área de entrada. Usa Ejemplo para cargar un ejemplo si quieres empezar desde una plantilla, o Borrar para limpiar todo.
2. Elige un modo de vista. Selecciona Dividido, Editor o Vista previa según quieras ver el código fuente, el resultado o ambos.
3. Activa las cuatro opciones. Cada una cambia cómo se renderiza el Markdown:
   • Saltos suaves — los saltos de línea simples en tu texto se convierten en <br> en la salida, en vez de colapsarse.
   • Enlazar URLs — las URLs sueltas como https://example.com se convierten automáticamente en enlaces clicables.
   • Tipografia — reemplaza las comillas rectas por tipografía inteligente (comillas curvas, guiones).
   • HTML sin procesar — permite incrustar HTML en línea en el Markdown. Nota: incluso con esto activado, la salida se sanitiza (mira abajo), así que las etiquetas y manejadores peligrosos se eliminan antes de que los veas o copies.
4. Revisa el panel de estadísticas. Muestra caracteres, palabras, líneas, títulos, enlaces y bloques de código — una forma rápida de confirmar que la estructura salió como querías.
5. Exporta. Haz clic en Copiar HTML para copiar el HTML renderizado al portapapeles, o Descargar HTML para guardar un documento .html independiente. También puedes Copiar Markdown o Descargar Markdown para exportar el código fuente .md.

Sanitización y seguridad

Esta es la parte que hace que la salida sea realmente segura para pegar en un CMS, un correo o una wiki. Cada parte del HTML renderizado — venga de la sintaxis Markdown o del HTML en bruto que incrustaste — pasa por DOMPurify antes de llegar a la vista previa o al portapapeles.

DOMPurify (configurado con USE_PROFILES: { html: true }) elimina las partes peligrosas: etiquetas <script>, manejadores de eventos en línea como onclick, y otros vectores que podrían ejecutar código. También prohíbe la etiqueta y el atributo style, así que los trucos de estilo no se cuelan. Si DOMPurify mismo llegara a fallar, un sanitizador de respaldo basado en expresiones regulares atrapa a los peores ofensores para que nunca recibas HTML crudo e inseguro.

Cuando la entrada en bruto difiere de la salida sanitizada, la herramienta muestra “HTML inseguro fue eliminado de la vista previa.” — un conteo del contenido eliminado. Ese aviso es la señal de que algo se quitó, justo lo que quieres antes de pegar en cualquier lugar sensible.

Límites y honestidad

Algunas restricciones honestas para que sepas exactamente lo que recibes:

• CommonMark, no GitHub Flavored Markdown. Esta herramienta sigue CommonMark con markdown-it. No renderiza las extensiones específicas de GitHub como tablas o tachado (~~texto~~) solo con sintaxis Markdown. Si necesitas una tabla o texto tachado, activa HTML sin procesar y escribe el HTML directamente — igual se sanitizará.
• style se elimina. Como DOMPurify prohíbe la etiqueta y el atributo style, el estilo en línea de tu HTML en bruto no sobrevivirá en la salida.
• El HTML sin procesar es opcional y de todos modos se sanitiza. La opción HTML sin procesar deja pasar el HTML en línea por el analizador de Markdown, pero el resultado renderizado se sanitiza después. Es seguro, pero no es una forma de ejecutar marcado arbitrario.

Preguntas frecuentes

¿La salida HTML es segura?

Sí. Todo el HTML renderizado pasa por DOMPurify antes de llegar a la vista previa, al botón de copiar o a la descarga. Los scripts, los manejadores de eventos y la etiqueta y atributo style se eliminan. Si se quitó algo, verás un aviso de “HTML inseguro fue eliminado de la vista previa.”.

¿Soporta tablas de GitHub?

No mediante sintaxis Markdown. La herramienta sigue CommonMark, que no tiene sintaxis de tabla nativa. Para incluir una tabla, activa HTML sin procesar y escribe el marcado <table> directamente — se renderizará y se sanitizará como cualquier otro HTML.

¿Puedo descargar el archivo HTML?

Sí. Descargar HTML guarda un documento .html independiente con un estilo básico, listo para abrir en cualquier navegador. También puedes Copiar HTML al portapapeles si quieres pegarlo en otro lado.

¿Qué es CommonMark?

CommonMark es una especificación estandarizada para Markdown que elimina la ambigüedad de los antiguos dialectos. Esta herramienta usa el motor markdown-it para renderizar CommonMark, así que la misma entrada produce de forma fiable la misma salida. No es GitHub Flavored Markdown — funciones como tablas y tachado no forman parte de la especificación central.