HTML y Markdown, ambas direcciones, en un solo sitio
Dos formatos entre los que los ingenieros se mueven cada día. Markdown para READMEs, docs, GitHub issues, chat. HTML para páginas web reales, plantillas de email, cualquier cosa que renderice un navegador. La traducción entre ellos es tediosa a mano y peligrosa con regex: los elementos block anidan, los inline tags se solapan, los code fences se comen los backticks. Esta herramienta corre la conversión a través de parsers reales en el servidor: `turndown` para HTML a Markdown, `marked` para Markdown a HTML.
Pega tu contenido a la izquierda, mira la salida convertida aparecer a la derecha con una preview en vivo del resultado renderizado. Activa GitHub Flavored Markdown (tablas, code fenced, strikethrough), conserva o quita HTML raw al ir a Markdown, activa smart quotes para tipografía limpia.
Todo corre server-side, que es una elección deliberada: un DOM real y un lexer markdown real superan al regex client-side cada vez, y la salida se sanitiza antes de salir de la ruta, así que la preview nunca puede alojar un tag `<script>` perdido.
Cómo usarlo
- Elige una dirección arriba: HTML a Markdown para portar una entrada de blog a un README, o Markdown a HTML para sacar el cuerpo de un email de un fichero de docs.
- Pega tu fuente en la caja de entrada a la izquierda, o pulsa Cargar ejemplo para ver un ejemplo funcional con una tabla y un bloque de código.
- La caja de salida se actualiza tras una pausa corta (unos 350 ms), suficiente para agrupar pulsaciones, suficientemente corto para sentirse en vivo.
- Usa el interruptor GitHub Flavored Markdown para habilitar tablas, code fenced y task lists. Déjalo activo para casi cualquier caso de uso moderno.
- Activa Conservar HTML raw al ir HTML a Markdown si tu fuente usa tags que Markdown no puede expresar (p. ej. `<kbd>`, `<sup>`, `<details>`): se quedan verbatim en vez de ser descartados.
- Smart quotes cambia comillas rectas por curvas y tres puntos por puntos suspensivos reales. Desactiva cuando tu salida vaya a un editor de código que odie Unicode.
- Pulsa Intercambiar dirección para hacer round-trip: la salida actual se convierte en la nueva entrada y la dirección se invierte. Útil para comprobar que no se perdió data.
- Pulsa Copiar para llevarte la salida al portapapeles, o Pegar para traer HTML o Markdown directamente desde tu portapapeles sin salir de la página.
Cuándo es útil
Seis situaciones concretas donde esto ahorra tiempo real:
- Importar una entrada de blog a un README. Escribiste un artículo largo en tu CMS (salida HTML), lo quieres como Markdown en el repo. Pega, elige HTML a Markdown, copia. Tablas y bloques de código sobreviven al viaje.
- Enviar una página de docs como email. Tienes un fichero Markdown en tu repo, tu servicio de email transaccional quiere HTML. Convierte una vez, pega el body HTML en la plantilla.
- Limpiar paste de rich-text. Word, Notion y Google Docs todos pegan HTML hinchado con estilos inline, wrappers span y sopa de clases. Pégalo aquí, elige HTML a Markdown, obtén un string limpio solo con la estructura: títulos, listas, enlaces, código.
- Migrar un CMS. El sitio viejo exporta HTML, el sitio nuevo (Hugo, Astro, content collection de Next.js) lee Markdown. Convierte en bloque página por página, mantén la estructura, suelta los estilos inline.
- Componer issues GitHub con tablas. Borraste una tabla comparativa en HTML en algún sitio, la quieres como una tabla GFM apropiada en un issue. Pega, convierte, pega en GitHub. El lío de pipes se genera por ti.
- Comprobación de cordura de tu render Markdown. Escribiste un README largo y quieres ver cómo se verá en GitHub. Pega en Markdown a HTML, mira la preview en vivo. Si un code fence se rompe o una tabla está mal alineada, la preview te lo dice al instante. Para montar el README en sí, ve al generador de README; para trabajo solo con tablas el editor de tablas Markdown es más rápido; y para docs largos coge un TOC Markdown.