Guía · HTML → Markdown

HTML a Markdown

HTML puede expresar muchísimo más que Markdown. Así que esta conversión es sobre todo una cuestión de qué hacer con todo lo que no tiene equivalente.

Tres respuestas, según la etiqueta: mapearla, quitar la etiqueta y conservar el texto, o quitar las dos cosas. Cuál se aplica lo decide una lista blanca, y vale la pena saber qué hay en ella.

Abrir el conversor

Una lista blanca, no una negra

Solo sobreviven a la primera pasada las etiquetas que significan algo en Markdown: títulos, párrafos, listas, enlaces, imágenes, énfasis, citas, código, tablas y el puñado de etiquetas en línea que las rodea. Todo lo demás se elimina, conservando su texto.

La razón de que sea una lista blanca es que una lista negra tiene que predecir cada etiqueta peligrosa, y HTML sigue añadiendo etiquetas nuevas. Una entrada que falte es un agujero. Así, la respuesta por defecto para cualquier cosa desconocida es no.

Los scripts, los manejadores de eventos y los enlaces javascript: se van, y en script, style, iframe, object y embed también se va el contenido, no solo la etiqueta. Conservar el texto de un <script> pegaría su código en tu documento como prosa visible.

Los atributos van en lista blanca igual: solo href, src, alt, title, colspan, rowspan y start. Así que class, id y style nunca llegan a la salida. Y no es solo seguridad: Markdown tampoco tiene dónde ponerlos.

Por qué importa sanear aunque no se renderice nada

Esta página nunca renderiza tu HTML, así que aquí no hay nada que pueda ejecutarse. El sanitizador existe por lo que pasa después.

Un enlace escrito como [click me](javascript:alert(1)) lo copia fielmente cualquier conversor de Markdown, y se convierte en un ataque funcional en el momento en que alguien publica ese Markdown en un sitio que lo renderiza. El riesgo no es nuestro, se le entrega a quien use la salida.

Así que las URL se comprueban contra una lista blanca de protocolos — http, https, mailto, ftp y rutas relativas — y cualquier otra cosa se descarta. Cuando se elimina algo, la salida dice qué era, en lugar de limpiar tu entrada a tus espaldas.

Tablas: conservarlas o aplanarlas

Por defecto una tabla se vuelve una tabla de barras de Markdown. Las barras dentro de las celdas se escapan, el espacio en blanco dentro de una celda se reduce a espacios simples, y las filas cortas se rellenan hasta el ancho de la fila más ancha para que la tabla siga siendo rectangular.

Aplanar es la alternativa, y existe para las tablas que nunca fueron tablas. Una página maquetada con una tabla para colocar cosas se convierte en una tabla de barras llena de celdas vacías; aplanada, cada fila se vuelve una línea de texto con las celdas unidas por un punto medio, y se lee muchísimo mejor.

Dos cosas no sobreviven por ninguna de las dos vías. Un <caption> se descarta, porque una tabla de barras no tiene dónde ponerlo: cópialo como una línea encima de la tabla si lo necesitas. Y el contenido de bloque dentro de una celda se colapsa: una lista en una celda sale con sus elementos pegados, porque una fila de tabla de barras tiene que ser una sola línea.

HTML
<table><tr><th>Part</th><th>Qty</th></tr>
<tr><td>Bolt | M6</td><td>12</td></tr></table>
Markdown
| Part | Qty |
| --- | --- |
| Bolt \| M6 | 12 |

Las etiquetas que conservan su HTML

Los superíndices y subíndices se quedan como <sup> y <sub>. Markdown no tiene sintaxis para ellos, y x2 en lugar de x² cambia lo que dice una fórmula: el HTML en crudo es válido en Markdown y estas dos etiquetas las maneja cualquier renderizador.

El subrayado no recibe ese trato. No tiene un significado que preservar: en la web un subrayado es un enlace, así que conservarlo sería directamente engañoso. El texto subrayado sale como texto normal.

El tachado se vuelve ~~, que es Markdown de GitHub y no la especificación original, pero hoy es lo bastante universal como para que quitarlo fuera la opción más rara.

Listas, bloques de código y los ajustes

Los elementos de lista se escriben como «- item», con un solo espacio. Casi todas las cadenas de herramientas de Markdown lo escriben así, y la alternativa habitual — tres espacios tras la marca — hace diffs ruidosos cuando un archivo lo editan las dos.

Las listas anidadas se sangran al ancho de la marca, y un párrafo que continúa dentro de un elemento de lista se sangra hasta alinearse con el texto de arriba en lugar de salirse de la lista. Un <ol> con atributo start conserva su numeración.

El carácter de viñeta puede ser -, * o +, y la valla de código ``` o ~~~. Elige según el lugar al que vaya el archivo; no hay diferencia funcional. Los títulos también pueden ir en el estilo subrayado, aunque solo los dos primeros niveles tienen uno: del tercero para abajo se quedan con las marcas # de todos modos, y conviene saberlo antes de elegirlo.

HTML
<ol><li><p>First para</p>
<p>Still item one</p></li></ol>
Markdown
1. First para

   Still item one

Dos entradas, un camino

Puedes pegar código HTML en la caja, o soltar un archivo .html. Los dos se tratan igual, porque para el código son la misma cosa: una cadena de HTML no confiable.

El techo de 25 MB es por entrada, que es muchísimo más que el código de cualquier página. Nada se sube: el análisis, el saneado y la conversión pasan todos en la pestaña.

Si el resultado vuelve vacío, la salida lo dice. Normalmente significa que la entrada era todo marcado y ningún texto: el <head> de una página, o un fragmento que solo eran estilos.

Pega el código o suelta el archivo, elige si las tablas siguen siendo tablas y copia el Markdown. Todo corre en tu navegador.

HTML → MD