Convertir HTML a Markdown

Qué hace este convertidor

HTML es el lenguaje con el que se construyen las páginas web. Markdown es una forma más ligera de escribir la misma estructura con caracteres normales: # para un encabezado, - para un elemento de lista, ** para la negrita. Convertir HTML a Markdown, y al revés, es algo que se hace a diario: pasar una entrada de blog de un CMS a un sitio estático, pegar una página web en un README o convertir notas escritas en Markdown en HTML para una plantilla de correo.

Esta página funciona en los dos sentidos. De HTML a Markdown usa Turndown, un convertidor muy utilizado, con reglas adicionales para tablas y bloques de código. De Markdown a HTML usa marked con GitHub Flavored Markdown activado.

Cómo usarlo

1. Elige una dirección con HTML a Markdown o Markdown a HTML.
2. Pega en el cuadro de la izquierda, pulsa Abrir archivo o pulsa Ejemplo para probarlo. El resultado se actualiza mientras escribes.
3. Para HTML a Markdown, elige el estilo de Encabezados (almohadillas o subrayados), el carácter de las Viñetas y cómo escribir los Bloques de código (delimitados o con sangría).
4. Para Markdown a HTML, activa Saltos de línea como <br> si los saltos de línea simples deben mantenerse como saltos, igual que en los comentarios de GitHub.
5. Cambia entre Código y Vista previa para ver el resultado renderizado, y después pulsa Copiar o Descargar.

Ejemplo de HTML a Markdown

Este HTML:

<h1>Release notes</h1>
<p>Version <strong>2.4</strong> adds <a href="https://example.com/docs">offline mode</a> and fixes <em>three</em> bugs.</p>
<ul>
  <li>Faster search</li>
  <li>New <code>--quiet</code> flag</li>
</ul>
<pre><code class="language-bash">npm install [email protected]</code></pre>
<table>
  <tr><th>Platform</th><th>Status</th></tr>
  <tr><td>Windows</td><td>Ready</td></tr>
</table>

se convierte en este Markdown:

# Release notes

Version **2.4** adds [offline mode](https://example.com/docs) and fixes *three* bugs.

- Faster search
- New `--quiet` flag

```bash
npm install [email protected]
```

| Platform | Status |
| --- | --- |
| Windows | Ready |

La clase language-bash del bloque de código se convierte en la etiqueta de lenguaje que va después de la valla de apertura, así que el resaltado de sintaxis sigue funcionando en GitHub y en la mayoría de los generadores de sitios estáticos. Las listas anidadas se sangran bajo su elemento padre, y una lista numerada conserva sus números.

Ejemplo de Markdown a HTML

Este Markdown:

## Install

Run `npm install` and open **http://localhost:3000**.

- [x] Node 20
- [ ] Docker

da este HTML:

<h2>Install</h2>
<p>Run <code>npm install</code> and open <strong><a href="http://localhost:3000">http://localhost:3000</a></strong>.</p>
<ul>
<li><input checked="" disabled="" type="checkbox"> Node 20</li>
<li><input disabled="" type="checkbox"> Docker</li>
</ul>

Aquí actúan dos extensiones de GitHub. La URL suelta se convirtió en un enlace, y los elementos de la lista de tareas se convirtieron en casillas. Las tablas con :-: en la fila divisoria reciben align="center" en sus celdas.

Por defecto, un salto de línea simple dentro de un párrafo se queda como un salto normal en el código, que los navegadores muestran como un espacio. Con Saltos de línea como <br> activado, Line one y Line two en líneas separadas pasan a ser <p>Line one<br>Line two</p>.

Qué se pierde

Markdown describe estructura, no diseño. Al pasar de HTML a Markdown:

• Se eliminan los bloques script, style, noscript y template.
• Se descartan las clases, los id, los estilos en línea y los atributos data.
• Los elementos contenedores como div y span desaparecen, pero su texto se queda.
• Las celdas de tabla con varios párrafos se unen en una sola línea, porque una fila de tabla Markdown tiene que caber en una línea. Una barra vertical dentro de una celda se escapa como \|.
• Las celdas combinadas (colspan) se completan con celdas vacías para que todas las filas tengan el mismo número de columnas.

Si necesitas un diseño exacto, deja el contenido en HTML. La mayoría de los renderizadores de Markdown admiten bloques de HTML sin procesar.

Consejos

• Cuando puedas, copia desde el código fuente de la página y no desde la página renderizada. Al copiar el texto renderizado se pierden las etiquetas que el convertidor necesita.
• Si el HTML está minificado o desordenado, el resultado es el mismo, porque el convertidor lee la estructura y no los espacios. Para leer el HTML en sí, pásalo antes por el formateador HTML.
• Pasa después el Markdown por el formateador Markdown para tener tablas alineadas y un énfasis uniforme.
• Para un documento de Word, usa el convertidor de Word a Markdown, que lee el archivo .docx directamente.
• Las tildes, la ñ y los signos ¿ y ¡ pasan sin cambios en las dos direcciones, y las entidades HTML como ñ se convierten en el carácter que representan.

Otras formas de convertir

• Pandoc convierte entre decenas de formatos desde la línea de comandos. pandoc page.html -o page.md es la forma básica.
• Editores: VS Code muestra una vista previa renderizada del Markdown con Ctrl+Mayús+V. Varias extensiones añaden un comando para pegar HTML como Markdown.
• Código: la biblioteca Turndown en JavaScript y el paquete markdownify en Python convierten HTML a Markdown dentro de tus propios scripts.

Todo lo que hay en esta página funciona en tu navegador. El HTML que pegas se analiza como un documento inerte, así que nada de lo que contiene se ejecuta ni se carga mientras se convierte.