Cómo convertir entre HTML y Markdown

Pega el HTML o el Markdown en el campo y pulsa HTML a Markdown o Markdown a HTML. El texto convertido aparece en el panel de resultado bajo los botones, listo para Copiar, y Limpiar vacía los dos paneles antes del siguiente documento. La entrada es un solo campo de texto y la salida también es texto: no hay subida de archivos ni modo por lotes. La conversión se ejecuta en el navegador: el texto no se sube y la página sigue funcionando cuando se cae la red.

El Markdown que se genera es GitHub Flavored Markdown (tablas con barras, bloques de código con vallas, listas anidadas) y el HTML que se devuelve es HTML simple, sin estilos. La conversión reescribe el marcado; no copia la página renderizada, así que las clases CSS, los estilos en línea y los scripts no forman parte del resultado.

  1. Pega el HTML o el Markdown en el campo superior. Ejemplo de Markdown rellena el campo con una muestra corta si quieres ver las dos direcciones antes de usar tu propio texto.
  2. Pulsa HTML a Markdown para pasar el marcado a Markdown, o Markdown a HTML para la dirección contraria. Los dos botones leen el mismo campo, así que un documento se puede convertir en ambos sentidos sin recargar la página.
  3. Lee el panel de resultado bajo los botones: contiene solo el texto convertido, y Copiar pone todo en el portapapeles.
  4. Pulsa Limpiar para vaciar el campo y el resultado. Si pulsas un botón de conversión con el campo vacío, la página muestra un aviso en su propio idioma en lugar de borrar el resultado anterior.
  5. Conserva el texto original hasta haber revisado la salida: los niveles de encabezado, las tablas, los bloques de código y las listas se reescriben por regla, y el escapado no siempre se ve a simple vista.

Qué reescribe, descarta y escapa el conversor

De HTML a Markdown

Los encabezados h1 a h6 pasan a # hasta ######, los párrafos se separan con una línea en blanco, <strong> y <b> pasan a **, <em> e <i> a _, <del> a ~~, y un enlace pasa a [texto](href) con el atributo title entre comillas. Una imagen pasa a ![alt](src) con su title; una imagen sin src conserva su texto alternativo en lugar de detener la conversión, y un enlace sin href conserva su texto. Un <br> se escribe como salto de línea con dos espacios y un <hr> como * * *.

Las listas conservan su anidamiento y su marcador: las viñetas siguen siendo -, una lista ordenada mantiene sus números y su atributo start, y un elemento con dos párrafos se escribe como elemento suelto en vez de aplanarse. Un bloque <pre><code> pasa a un bloque con vallas; el lenguaje se lee de una clase como language-js, lang-js o brush: js, la valla se alarga cuando el propio código contiene acentos graves, y un <code> en línea pasa a un par de acentos graves.

Los comentarios, <script>, <style>, <head>, <title>, <meta>, <noscript>, <iframe>, <svg> y los controles de formulario como <input>, <select>, <textarea> y <button> se descartan junto con su contenido, porque no tienen significado en Markdown. Los <div> y <span> vacíos también desaparecen, el texto dentro de una etiqueta desconocida o sin cerrar se conserva, y el marcado mal formado ya no lanza el error que antes dejaba vacío el panel de resultado.

De Markdown a HTML

En el sentido contrario la página renderiza encabezados, párrafos, énfasis, enlaces, imágenes, citas, líneas horizontales y listas anidadas como HTML. Un bloque con vallas pasa a <pre><code> con el lenguaje como clase, una tabla GFM con barras pasa a una <table> real con la alineación aplicada, y un fragmento de código en línea pasa a <code>, de modo que una muestra como <div> sigue visible como texto en lugar de desaparecer en la página.

El HTML escrito dentro del Markdown se deja pasar tal cual (la página no escapa ni elimina un <div> o un <script> que hayas escrito tú) y los enlaces por referencia ([texto][1] con [1]: url debajo) se resuelven. Una lista con viñetas seguida de una lista numerada siguen siendo dos listas en vez de fusionarse en una, así que los números se conservan.

Tablas, escapado y límites prácticos

Una <table> pasa a una tabla GFM con barras: la primera fila se usa como cabecera (desde <th>, o desde <td> cuando la tabla no tiene fila de cabecera), la alineación de columna se lee del atributo align o de un estilo text-align, y una barra dentro de una celda se escapa con una barra invertida. Un <br> dentro de una celda se escribe como <br> para que la fila siga en una sola línea.

El texto que se leería como Markdown se escapa a la salida: * _ [ ] y los acentos graves reciben una barra invertida, una línea que empieza por #, -, + o un número con punto se escapa, y < se convierte en &lt;. Las entidades HTML se decodifican, así que &amp; llega como &, mientras que &nbsp; sigue siendo un espacio duro. Los usos habituales son convertir un fragmento HTML en Markdown para un README o una carpeta de documentación, y lo contrario cuando el Markdown tiene que entrar en un CMS o un sitio estático. Todo se ejecuta en tu dispositivo, así que un documento muy grande está limitado por la memoria del navegador y no por una cuota de subida; por encima de 50.000 caracteres el panel de resultado muestra texto escapado sin colores de sintaxis.

Herramientas recientes: