§

Pegar HTML

§

Sin procesar

§

Vista previa

La vista previa se sanea con DOMPurify — las etiquetas script, los manejadores de eventos y los URIs javascript: se eliminan antes de renderizar.

Markdown es la lingua franca de la documentación de software en EE. UU. y el Reino Unido. Cada README de GitHub, respuesta de Stack Overflow y comentario de Reddit pasa por un analizador Markdown, y los más de 100 millones de posts de desarrolladores en Stack Overflow dependen de CommonMark para una renderización fiable. Los laboratorios federales de EE. UU. ejecutan pipelines de MkDocs y Sphinx que convierten archivos fuente Markdown en portales de documentación estática, mientras que los diseñadores de contenido de GOV.UK redactan páginas de servicios en Markdown antes de publicarlas. Notion, Obsidian y Bear ofrecen toma de notas Markdown-first a millones de trabajadores del conocimiento en EE. UU. y el Reino Unido, y los newsletters de Substack compilan borradores Markdown en correos HTML. Convertir HTML exportado de vuelta a Markdown es trabajo diario para redactores técnicos, mantenedores de código abierto e ingenieros de plataforma en ambos mercados.

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

HTML es el marcado renderizado que muestra el navegador — <h1>, <ul>, <table>, <a> y el resto. Markdown es un formato ligero de texto plano que usa puntuación mínima (# para encabezados, * para énfasis, - para elementos de lista) para codificar la misma estructura. GitHub Flavored Markdown (GFM) amplía la especificación CommonMark original con tablas, tachado, listas de tareas y autolinks. Convertir HTML a Markdown devuelve el HTML renderizado o exportado a Markdown de texto plano editable — exactamente lo que necesita una migración de contenido desde un CMS o una limpieza de README.

¿Qué funciones de GitHub Flavored Markdown admite la salida?

El motor turndown@7.2.0 incluido con la extensión turndown-plugin-gfm emite el superconjunto GFM completo a partir de tu HTML: encabezados estilo ATX # a ###### desde <h1><h6>, listas ordenadas y desordenadas con anidamiento, negrita **texto** y cursiva *texto*, tachado ~~texto~~ desde <del>, enlaces en línea [texto](url) e imágenes ![alt](src), bloques de código con cercas y pistas de lenguaje (```js), spans de código en línea `code`, tablas con barras desde <table>, listas de tareas GFM - [ ] / - [x] desde inputs de checkbox, citas en bloque > y reglas horizontales ---. El panel de vista previa vuelve a renderizar el Markdown emitido con marked@12.0.2 para que puedas confirmar la conversión visualmente.

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

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

  1. Sanear: el HTML pegado se ejecuta primero a través de DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) para eliminar elementos <script>, todos los manejadores de eventos on* y URIs javascript: antes de que nada recorra el marcado. DOMPurify es el mismo sanitizador XSS utilizado por Mozilla MDN, Atlassian y Microsoft 365.
  2. Convertir: turndownService.turndown recorre el DOM limpio y emite GitHub Flavored Markdown — los encabezados se convierten en prefijos #, las listas en elementos - / 1., <table> en una tabla con barras, etc. El Markdown se escribe en el <textarea> de solo lectura vía value (nunca innerHTML), por lo que es inherentemente seguro.
  3. Renderizar: el Markdown emitido se vuelve a analizar con marked.parse, se sanea de nuevo con DOMPurify y se asigna al innerHTML del panel de vista previa para que obtengas una confirmación visual de que el Markdown redondea correctamente. El modo en vivo aplica un debounce de 150 ms a la entrada para que la salida se actualice mientras pegas sin sobrecargar el analizador.

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

  • Privacidad: cada paso de saneamiento, conversión y renderizado ocurre en tu navegador. El HTML — incluyendo posts de CMS exportados, documentación interna y código fuente de páginas confidenciales — nunca llega a nuestros servidores.
  • Seguro frente a XSS por defecto: el HTML pegado se ejecuta a través de DOMPurify antes de que turndown lo recorra, y el panel de vista previa vuelve a ejecutar el HTML re-renderizado a través de DOMPurify antes de innerHTML, por lo que pegar marcado que contiene etiquetas <script> o manejadores onerror= produce una vista previa inerte y Markdown limpio.
  • GFM completo: los elementos <table> se convierten en tablas Markdown con barras, <del> en tachado y las listas de checkbox en listas de tareas GFM. La mayoría de los conversores en línea pierden las tablas en el camino HTML → Markdown — la extensión incluida turndown-plugin-gfm las preserva.

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

Convertir HTML a Markdown aparece en migración de contenido, documentación y archivado:

  • Migración de CMS: exportar una entrada de WordPress o Ghost como HTML y convertirla a Markdown para una reconstrucción con Hugo / Jekyll / 11ty / Astro. La conversión preserva los niveles de encabezado, enlaces, listas y énfasis en línea.
  • Limpieza de README: pegar el HTML renderizado de una página wiki o artículo web y convertirlo de vuelta a Markdown editable para un README de proyecto o sitio de documentación, en lugar de reescribir la estructura a mano.
  • Archivado y notas: capturar un correo HTML o recorte web y convertirlo a Markdown para almacenarlo en Obsidian, Notion o una base de conocimiento en texto plano — Markdown es compatible con diff y sobrevive al cambio de formato.

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

Pegar <h2>Encabezado</h2><ul><li>a</li><li>b<ul><li>anidado</li></ul></li></ul> produce Markdown con ## Encabezado, una lista anidada con viñetas y un panel de vista previa que vuelve a renderizar la misma estructura anidada. Pegar un <table> con una fila de encabezado y dos filas de datos produce la tabla con barras equivalente | col | col | — confirmando que la conversión preserva encabezados, listas y tablas.

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

Sí. Cada paso de saneamiento, conversión y renderizado se ejecuta localmente como JavaScript dentro de la pestaña del navegador. Las tres librerías incluidas — turndown@7.2.0 (con turndown-plugin-gfm@1.0.2), 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 exportados, los documentos internos y el código fuente de páginas confidenciales se quedan en tu dispositivo.

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

Sí. El HTML pegado se ejecuta a través de DOMPurify.sanitize antes de que turndown lo recorra, y cada cadena HTML asignada al innerHTML de la vista previa pasa por DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) también. 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.) y los esquemas URI javascript:. 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 se convierten desde HTML?

Sí. La dirección HTML → Markdown utiliza turndown-plugin-gfm, que añade una regla turndown personalizada que recorre los nodos <table> y emite el Markdown de tabla con barras equivalente — una fila de encabezado, una fila de alineación |---|---| y luego filas de datos. La mayoría de los conversores en línea pierden tablas en este camino; éste las preserva. El tachado (<del>texto</del>~~texto~~) y las listas de tareas (<input type="checkbox">- [ ] / - [x]) se convierten del mismo modo.

¿Mi HTML se convertirá correctamente?

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 conversión es limpia y predecible. Casos límite: los comentarios HTML (<!-- ... -->) se eliminan (Markdown no tiene sintaxis de comentario); el estilo en línea y los atributos de clase se descartan porque Markdown no tiene equivalente; y etiquetas en línea poco comunes como <sub> / <sup> se convierten a texto plano. Estos son comportamientos documentados de turndown, no bugs.

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

No en v1. Los bloques de código con cercas se renderizan en la vista previa 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 HTML a Markdown incluye turndown@7.2.0 (+ turndown-plugin-gfm@1.0.2), marked@12.0.2 y DOMPurify@3.1.7 en el mismo origen, emite 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.