Me gano la vida migrando contenido, en el sentido de que cualquiera que haya administrado un sitio de WordPress durante una década eventualmente lo hace. Cuando moví un lote de publicaciones antiguas de un creador de páginas a un sistema de documentos basado en Markdown, descubrí qué significa "limpiar HTML" realmente significa en la naturaleza: <p> etiquetas con estilos en línea, vacías <span>s envolviendo palabras individuales, <div>s tres niveles de profundidad alrededor de un párrafo, y alguna que otra etiqueta que simplemente nunca se cerró. Pasar eso a un campo Markdown me dio una pared de corchetes angulares literales. Copiar y pegar el prestado el texto perdió todos los enlaces, encabezados y listas. Ninguno de los atajos funcionó y terminé limpiando artículos a mano durante una tarde antes de tener sentido al respecto.
Ser sensato significaba tratar HTML a Markdown como lo que es: una transformación estructurada con un conjunto claro de reglas, no una copia y pegado. Un elemento de encabezado se convierte en # línea. Negrita se vuelve **. Un enlace se convierte [text](url). Una tabla se convierte en una tabla de tuberías. Una vez que tienes esas asignaciones y un analizador lo suficientemente tolerante como para sobrevivir al marcado del mundo real, la conversión es aburrida y confiable, que es exactamente lo que deseas. Construyo [Toolz.dev](/ y pongo un navegador basado en Convertidor de HTML a Markdown ahí se aplican estas reglas, pero esta guía trata sobre las reglas mismas para que comprenda cómo debe verse el resultado y por qué.
TL;Dr: Para convertir HTML a Markdown, asigne elementos de bloque a sus equivalentes de Markdown (
<h2>→##,<ul><li>→-,<blockquote>→>,<pre><code>→ un bloque cercado), mapear elementos en línea (<strong>→**,<em>→*,<a>→[text](href),<img>→), turn<table>en una tabla de tuberías Markdown con sabor a GitHub, decodifique entidades HTML de regreso a caracteres reales y suéltelas<script>/<style>. Utilice un analizador que tolere las etiquetas no cerradas y hágalo en el navegador para que su contenido nunca se cargue.
¿por qué convertir HTML a Markdown?
Markdown es el formato portátil de la web para desarrolladores moderna. LÉAME archivos, sitios de documentación, blogs estáticos (contenido de Hugo, Jekyll, Astro, Next.js), aplicaciones de notas como Obsidian y Bear, problemas de GitHub y, cada vez más, las indicaciones y el contexto que alimentamos a los modelos de IA; todos ellos hablan Markdown. It's texto sin formato, difiere limpiamente en Git y sobrevive al movimiento de un sistema a otro sin arrastrar una pila de marcado de presentación.
HTML, por el contrario, es lo que tú terminar con siempre que el contenido pasa a través de un navegador o un editor WYSIWYG. Copie una sección de una página web, exporte desde un CMS, extraiga el cuerpo de un artículo de una API o obtenga texto formateado de un campo de texto enriquecido y obtendrá HTML, generalmente HTML abarrotado, lleno de elementos envolventes y estilos en línea que no utiliza. ' No quiero en un documento limpio. La conversión es el puente de " contenido atrapado en el marcado de presentación" a " contenido que puedo versionar, editar y volver a publicar en cualquier lugar."
Los escenarios se repiten constantemente una vez que los notas. Migrar un blog de WordPress o Medium. Sacar documentación de un sistema de ayuda HTML heredado. Convertir un artículo extraído en una nota de Markdown. Convirtiendo un boletín informativo por correo electrónico y HTML n.° 39 en un borrador de Markdown. Alimentar una página web y el contenido n.° 39 a un LLM como contexto limpio en lugar de HTML sin procesar que desperdicia tokens <div> sopa. En todos los casos, las alternativas manuales (reescribir o copiar y pegar texto renderizado y reconstruir el formato a mano) son lentas y deficientes. Un conversor basado en reglas no es ninguna de las dos cosas.
¿cómo se asigna HTML a Markdown?
El mapeo se divide naturalmente en dos capas: estructura a nivel de bloque y formato en línea.
Elementos de bloque defina el esqueleto del documento 's, y cada uno tiene una contraparte directa de Markdown:
<h1>-<h6>convertirse en#hasta######líneas de rumbo.<p>se convierte en un párrafo separado por líneas en blanco.<ul>/<li>convertirse en-listas con viñetas;<ol>/<li>convertirse en1.listas numeradas y listas anidadas sangradas por dos espacios.<blockquote>prefija cada línea con>.<hr>se convierte en---.<pre><code>se convierte en un bloque de código vallado con triple backticks.<table>se convierte en una mesa de tubos Markdown con sabor a GitHub.
Elementos en línea decorar texto dentro de esos bloques:
<strong>y<b>convertirse en**bold**.<em>y<i>convertirse en*italic*.<code>se convierte en`inline code`.<a href="...">se convierte en[link text](href), manteniendo eltitleatributo cuando esté presente.<img>se convierte en.<del>y<s>convertirse en~~strikethrough~~(una extensión Markdown con sabor a GitHub).<br>se convierte en una ruptura de línea dura: dos espacios finales antes de la nueva línea.
Ejecute esas reglas sobre un bloque real de HTML y la estructura sobrevivirá intacta. Dada esta entrada:
<article>
<h1>Getting Started</h1>
<p>Convert <strong>HTML</strong> into clean <em>Markdown</em>.</p>
<ul>
<li>Paste from a CMS</li>
<li>Get portable output</li>
</ul>
<pre><code class="language-js">const md = convert(html)</code></pre>
</article>
tu înțelegi:
# Getting Started
Convert **HTML** into clean *Markdown*.
- Paste from a CMS
- Get portable output
```js
const md = convert(html)
```
Vale la pena destacar dos detalles de ese resultado. Primero, el <article> wrapper no contribuyó en nada: contenedores estructurales como <article>, <section>y <div> son transparentes; el convertidor recurre a ellos y convierte a sus hijos en bloques. En segundo lugar, la valla del código fue recogida js como su lenguaje. Eso's porque el <code> elemento transportado class="language-js", los resaltadores de sintaxis de la convención usan y un buen convertidor lee esa clase para etiquetar la cerca. It' es una pequeña cosa que marca la diferencia entre un bloque de código que resalta en su sitio de documentos y uno que no't.
¿qué hace que un convertidor sobreviva al HTML del mundo real?
Las reglas anteriores son la parte fácil. La razón por la que los convertidores de expresiones regulares enrollados manualmente fallan (y I' he escrito y desechado un par) es que el HTML real rompe suposiciones constantemente. Surgen tres problemas una y otra vez.
Etiquetas no cerradas. Los navegadores son famosos por perdonar: <p>one<p>two se traduce como dos párrafos porque a <p> se cierra implícitamente cuando se abre otro elemento de bloque, y <li>a<li>b hay dos elementos de lista por la misma razón. Un analizador ingenuo que sólo cierra elementos de forma explícita </p> anidará el segundo párrafo dentro del primero y destrozará todo aguas abajo. Un convertidor robusto aplica las mismas reglas de etiqueta final implícitas que define la especificación HTML: al abrir un elemento a nivel de bloque se cierra un párrafo abierto; abriendo un <li> cierra el anterior. Mi convertidor hace esto, razón por la cual pegar una salida CMS descuidada generalmente solo funciona.
<script> y <style> bloques. Estos contienen código y CSS, no contenido, y su contenido debe tomarse palabra por palabra (a < dentro de JavaScript no hay una etiqueta) y luego se elimina por completo. Olvídese de los casos especiales y obtendrá el sangrado de la fuente JavaScript en su Markdown.
Entidades HTML. El contenido web está plagado de &, ©, —, , y referencias numéricas como ’. En Markdown, que es texto sin formato, quieres los caracteres reales: &, ©, —, y un verdadero apóstrofe. Decodificar entidades numéricas y nombradas no es opcional; omítelo y su Markdown limpio se leerá como fuente de visualización.
Es por eso que dejé de intentar convertir HTML con buscar y reemplazar y en su lugar creé un analizador tolerante adecuado. Tokeniza el HTML en un árbol: maneja comentarios, elementos vacíos como <br> y <img>, nombres de etiquetas en mayúsculas y atributos sin comillas, y luego recorre ese árbol que emite Markdown. En particular, no depende del navegador 't;s DOM, lo que significa que la misma lógica también se ejecuta en un servidor, pero la recompensa práctica para usted es simple: no es 'T agregue el marcado desordenado del que están hechos los sitios web reales.
¿Cómo uso el convertidor?
En Toolz.dev/tools/html-to-markdown, pegue su HTML en el panel izquierdo y el Markdown aparecerá a la derecha mientras escribe - allí 's sin carga y sin botón Convertir para buscar. Cargue la muestra si desea ver todas las construcciones compatibles a la vez.
Algunas opciones cubren las preferencias comunes. Elige tu personaje bala (-, *, o +) para listas desordenadas que coincidan con su proyecto 's estilo. Mantenga GitHub Sabored Markdown activado para tablas y tachado, o desactivado si su objetivo solo acepta CommonMark. Alternar " mantener enlaces" desactivado cuando desee la prosa pero no las URL, útil para convertir un artículo con muchos enlaces en texto de lectura limpio, y " mantener imágenes" apagado para eliminar imágenes por completo. La fila de estadísticas muestra palabras, encabezados, enlaces, imágenes, bloques de código y un tiempo de lectura estimado, lo cual es una verificación rápida de cordura de que la estructura se encontró antes de pegar el resultado en alguna parte.
Como ocurre con todo lo que hay en el sitio, la conversión es 100% del lado del cliente. El analizador es JavaScript simple que se ejecuta en su navegador, por lo que las páginas pegadas, la documentación interna y los borradores no publicados nunca se envían a ninguna parte. Eso ' es el valor predeterminado correcto para el trabajo de contenido; debería ' No tengo que cargar un borrador en un servidor extraño ' solo para reformatearlo, y significa que la herramienta sigue funcionando sin conexión. Profundizo en por qué el procesamiento del lado del navegador es importante en el Guía de herramientas de privacidad de datos.
HTML frente a Markdown: cuándo usar cuál
Convertir entre ellos es fácil; saber cuál quieres es la verdadera decisión.
| Aspecto | HTML | Marcación |
|---|---|---|
| Propósito principal | Representación en un navegador | Escribir y almacenar texto |
| Legibilidad como fuente | Pobre (con muchas etiquetas) | Excelente (se lee como texto sin formato) |
| Git diferencias | Ruidoso | Limpio |
| Portabilidad entre sistemas | Bajo | Alto |
| Control preciso del diseño | Completo | Limitado por el diseño |
| Donde vive | Páginas web, salida WYSIWYG | README, documentos, notas, sitios estáticos |
| Curva de aprendizaje | Empinado | acta |
Markdown cambia deliberadamente el control de diseño por simplicidad, razón por la cual gana contenido que escribe, versiona y mueve, y pierde cuando necesita una presentación a nivel de píxel. Convierta HTML a Markdown cuando esté capturando o migrando contenido; mantenga HTML cuando usted'Estoy construyendo un página. Y cuando necesite ir en sentido contrario, Marque hacia abajo en HTML para un campo CMS o plantilla de correo electrónico, el Convertidor de reducción a HTML es el reflejo de esta herramienta y comparte las mismas convenciones, por lo que los dos viajan limpiamente de ida y vuelta para estructuras comunes.
Donde esto encaja en un flujo de trabajo de contenido
La conversión de formato rara vez es todo el trabajo; it's un paso. Después de convertir un artículo a Markdown I' Por lo general, ejecutaré el texto a través de a contador de palabras para comparar la longitud con un destino, y si el origen tenía entidades HTML que necesitan codificación para algún otro destino, el Codificador/decodificador de entidades HTML maneja lo contrario. Cuando I'm limpiando HTML escrito a mano antes de la conversión, an Minificador HTML primero elimina el ruido. Estas pequeñas herramientas se encadenan en una canalización repetible, que es la idea detrás de cómo pienso sobre un conjunto de herramientas basado en navegador; expuse esa filosofía en el Guía del kit de herramientas para desarrolladores web y el más amplio Guía de herramientas de codificación.
Errores comunes al convertir HTML a Markdown
Copiar y pegar texto renderizado en lugar de convertir el HTML. Pierdes enlaces, encabezados y listas, toda la estructura. Convierte el marcado real.
Ignorando la clase de idioma del código. Si tus bloques cercados salen sin un idioma y no se resaltan, el convertidor dejó caer el class="language-x" pista. Uno bueno lo lee.
Suponiendo que CommonMark y GFM sean iguales. Las tablas y el tachado son extensiones de marcado con sabor a GitHub, no CommonMark central. Si su destino es CommonMark estricto, una tabla won't renderizar - convertir con GFM desactivado y manejar tablas de otra manera.
Confiar en un conversor que sube tu contenido. Mucho "gratis" Los convertidores en línea PUBLICAN su HTML en un servidor. Para cualquier cosa inédita o interna, eso ' es una fuga. Utilice una herramienta del lado del cliente.
preguntasrán el
¿Cómo convierto html a rebaja?
Pegue su HTML en el editor y Markdown aparecerá inmediatamente: no hay ningún archivo para cargar ni ningún botón de conversión para presionar. Ajuste el estilo de la viñeta o el manejo del enlace si lo desea, luego copie Markdown o descárguelo como un archivo.md.
¿El convertidor maneja las mesas?
Sí. Con GitHub Flavored Markdown habilitado, un HTML se convierte en una mesa de tuberías Markdown: la primera fila se convierte en el encabezado, se inserta una fila divisoria y las filas restantes se convierten en el cuerpo. Los caracteres de tubería dentro de las celdas se escapan para que no rompan la mesa.
¿Qué sucede con los enlaces y las imágenes?
Los anclas se convierten [enlace texto](href) y las imágenes se vuelven , preservando el atributo de título cuando esté presente. Si desactiva "mantener enlaces" el texto ancla se mantiene pero se elimina la URL y se desactiva "mantener imágenes" elimina imágenes por completo, lo que resulta útil cuando solo desea la prosa.
¿Se conservan los bloques de código y el código en línea?
Sí. A block becomes a fenced code block, and if the code element carries a class like "language-js" that language is added to the fence. Inline spans are wrapped in backticks, and the code text itself is never escaped or reformatted, so snippets stay exactly as written.
Will it work on messy HTML copied from a website?
That is what it is built for. The parser is tolerant of unclosed tags, uppercase element names, unquoted attributes and stray comments, and it strips