Convertidor Markdown a HTML — Convierte Markdown a HTML en línea _

¿Qué es la conversión Markdown a HTML?

Markdown es un formato ligero de texto plano que utiliza puntuación mínima (# para encabezados, * para énfasis, - para elementos de lista) para codificar prosa estructurada. GitHub Flavored Markdown (GFM) amplía la especificación CommonMark original con tablas, tachado, listas de tareas y autolinks. HTML es la forma renderizada que muestra el navegador. Convertir Markdown a HTML te permite redactar en la sintaxis ligera y publicar en una superficie renderizada — un README, una página de sitio estático, el cuerpo de un correo — sin escribir las etiquetas a mano.

¿Qué funciones de GitHub Flavored Markdown se admiten?

El parser incluido marked@12.0.2 soporta el superconjunto completo GFM: encabezados estilo ATX de # a ######, listas ordenadas y desordenadas con anidamiento, negrita **texto** y cursiva *texto*, tachado ~~texto~~, enlaces en línea [texto](url) e imágenes en línea ![alt](src), bloques de código con cercas y etiqueta de lenguaje opcional (```js), spans de código en línea `code`, tablas con barras y fila de encabezado, listas de tareas GFM - [ ] / - [x], citas en bloque >, reglas horizontales --- y autolinks. Cada uno se renderiza en el panel de vista previa igual que GitHub lo hace.

¿Cómo funciona la conversión Markdown a HTML?

Cada conversión se ejecuta localmente en tu navegador usando dos librerías incluidas — sin CDN, sin fetch, sin telemetría. Los pasos principales son:

1. Analizar: marked.parse(source) lee tu Markdown y produce una cadena HTML. El parser se ejecuta en modo GFM, por lo que tablas, listas de tareas, tachado y autolinks se reconocen.
2. Sanear: la salida HTML pasa por DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) antes de asignarse a innerHTML. DOMPurify es el mismo sanitizador XSS utilizado por Mozilla MDN, Atlassian y Microsoft 365 — analiza el HTML, recorre el DOM y elimina elementos <script>, todos los atributos manejadores on* y los esquemas URI javascript:.
3. Renderizar: el HTML saneado se escribe en el panel de vista previa mediante innerHTML, y el HTML sin procesar se muestra en la segunda pestaña a través de un <textarea> de solo lectura para que puedas copiar el marcado. El modo en vivo aplica un debounce de 150 ms a la entrada para que la vista previa se actualice mientras escribes sin saturar el parser.

¿Por qué convertir Markdown a HTML con esta herramienta?

• Privacidad: cada paso de análisis, saneamiento y renderizado ocurre en tu navegador. El Markdown — incluyendo entradas de blog inéditas, borradores de documentación interna y contenido README confidencial — nunca llega a nuestros servidores.
• Seguro frente a XSS por defecto: el panel de vista previa renderizada pasa cada cadena HTML por DOMPurify antes de innerHTML, así que una etiqueta <script> o manejador onerror= dentro del HTML bruto de tu Markdown produce una vista previa inerte. La pestaña sin procesar muestra la salida no saneada para inspección, dentro de un <textarea> mediante value — nunca se ejecuta.
• GFM completo: tablas, tachados, listas de tareas y autolinks se renderizan igual que GitHub los renderiza. Una tabla Markdown con barras se convierte en un <table> HTML con <thead> y <tbody> — sin filas perdidas, sin estructura aplanada.

¿Cuáles son las aplicaciones comunes de la conversión Markdown a HTML?

Convertir Markdown a HTML es habitual en documentación, trabajo con sitios estáticos y creación de correos electrónicos:

• Redacción de README en GitHub: redactar un README de proyecto localmente como Markdown y previsualizarlo antes de hacer push. La vista previa coincide con el renderizador GFM de GitHub para tablas, listas de tareas y código entre cercas.
• Contenido para sitio estático: pegar un post de Markdown y obtener el HTML para un campo de CMS o un motor de plantillas que espera marcado en lugar de fuente Markdown.
• Plantillas de correo electrónico: escribir el cuerpo de un correo transaccional como Markdown y convertirlo a HTML para el motor de plantillas del proveedor de correo. La salida es HTML semántico simple — sin estilos en línea, sin peculiaridades de cliente de correo incrustadas.

¿Cómo se ve un ejemplo de conversión Markdown a HTML?

Pegar # Título\n\n- elemento 1\n- elemento 2\n\n[enlace](https://example.com) produce un panel de vista previa que contiene <h1>Título</h1>, una lista desordenada de dos elementos y un <a href="https://example.com">enlace</a>. La pestaña sin procesar muestra la cadena HTML exacta para que puedas copiarla directamente en una plantilla. Una tabla con barras que incluye una fila de alineación |---|---| se convierte en un <table> completo con <thead> y <tbody> — confirmando que las tablas GFM se renderizan igual que GitHub.

¿Este convertidor Markdown a HTML se ejecuta íntegramente en mi navegador?

Sí. Cada paso de análisis, saneamiento y renderizado se ejecuta localmente como JavaScript dentro de la pestaña del navegador. Las librerías incluidas — marked@12.0.2 y DOMPurify@3.1.7 — se sirven desde el mismo origen que la página, así que no hay dependencia de CDN, ni fetch, ni XMLHttpRequest, ni navigator.sendBeacon sobre la entrada. La herramienta también funciona sin conexión una vez que la página se ha cargado, porque es un bundle estático HTML/CSS/JS con las librerías vendor copiadas al lado. Los posts inéditos, los documentos internos y los README confidenciales se quedan en tu dispositivo.

¿El panel de vista previa renderizada es seguro frente a XSS?

Sí. Cada cadena HTML asignada a innerHTML pasa primero por DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }). DOMPurify es el sanitizador XSS de código abierto mantenido por Cure53; es la misma librería utilizada por Mozilla MDN, Atlassian y Microsoft 365 para endurecer el HTML proporcionado por el usuario. El perfil html por defecto elimina los elementos <script>, todo atributo manejador de evento on* (onerror, onclick, etc.), los esquemas URI javascript: dentro de href / src y las expresiones CSS conocidas como peligrosas. Pegar <img src=x onerror=alert(1)> produce una vista previa en la que document.querySelector('#output-preview img[onerror]') devuelve null y no se dispara ninguna alerta.

¿Las tablas GFM están soportadas?

Sí. La dirección Markdown → HTML maneja las tablas con barras de forma nativa vía el modo GFM de marked — una fila de encabezado separada por una fila de alineación |---|---|, seguida de filas de datos, produce una <table> con <thead> + <tbody>. El tachado (~~texto~~ → <del>texto</del>) y las listas de tareas (- [ ] / - [x] → <input type="checkbox">) se renderizan igual que GitHub.

¿Mi Markdown se convierte de forma fiel?

Para el conjunto canónico de funciones GFM — encabezados h1 a h6, listas ordenadas y desordenadas con anidamiento, negrita / cursiva / tachado, enlaces en línea, imágenes en línea, bloques de código con cercas y etiquetas de lenguaje, spans de código en línea, tablas con barras, listas de tareas, citas en bloque, reglas horizontales y autolinks — la salida HTML es estable y coincide con el renderizador de GitHub. Algunos comportamientos a tener en cuenta: el HTML en línea crudo dentro del Markdown (p. ej. <sub>texto</sub>) pasa sin cambios a la salida, y los encabezados setext de CommonMark (=== subrayados) y los encabezados ATX (# Título) producen el mismo <h1>. Son comportamientos documentados de marked, no bugs. Si necesitas la dirección inversa, usa la herramienta HTML a Markdown.

¿Se admite el resaltado de sintaxis en bloques de código entre cercas?

No en v1. Los bloques de código entre cercas se renderizan con fuente monoespaciada y un fondo sutil, pero sin resaltado de tokens por lenguaje. Añadir resaltado de sintaxis requeriría incluir Prism o highlight.js, cada uno de los cuales añade 15–40 KB más un archivo de gramática por lenguaje y una matriz de temas que tendría que alinearse con la paleta Workshop Terminal. Por ahora, el renderizador se enfoca en la corrección y la seguridad XSS; si hay demanda de los usuarios por el resaltado en línea, un interruptor opcional es un seguimiento viable.

Este Convertidor Markdown a HTML viene con marked@12.0.2 y DOMPurify@3.1.7 incluidos en el mismo origen, soporta el conjunto completo de funciones GFM y sanea cada cadena HTML renderizada antes de que toque el DOM. Sin subida, sin CDN, sin telemetría — cada byte se queda en tu navegador.