tooly

Convertir Markdown a HTML online

Pega Markdown de GitHub, Obsidian o Notion y obtén HTML estándar — con vista previa en vivo para revisar tablas y bloques de código antes de copiar.

Todo funciona en tu navegador — no se envía nada

Cómo se usa

  1. 1

    Pega tu Markdown en el recuadro.

  2. 2

    Cambia entre el código HTML y la vista previa renderizada.

  3. 3

    Copia el HTML o descárgalo como archivo .html.

Adónde va a parar el HTML

Markdown es agradable de escribir, pero muchos destinos solo aceptan HTML: la vista de código de un editor de CMS, una plantilla de correo, el campo de descripción de producto de una tienda online, un portal de documentación sin soporte para Markdown o una página estática que montas a mano. Convertir aquí te da el marcado para pegarlo en cualquiera de ellos, y la vista previa te permite revisar el resultado antes de publicarlo.

La conversión usa el dialecto GitHub Flavored Markdown, así que un texto escrito para un README, la descripción de una pull request o una aplicación de notas como Obsidian se comporta aquí igual que allí.

Cómo es el resultado

El conversor produce un fragmento del cuerpo: los elementos en sí, sin <html>, <head> ni estilos. Conviene saber algunos detalles antes de pegarlo en algún sitio:

  • Los títulos no llevan atributo id. ## Precios se convierte en <h2>Precios</h2>. Si necesitas enlaces de anclaje para un índice, añade tú los ids.
  • Los bloques de código llevan una clase de lenguaje. Un bloque abierto con `python produce <pre><code class="language-python">, que resaltadores como Prism y highlight.js detectan automáticamente. Los caracteres como < y & dentro del código se escapan.
  • Las listas de tareas se convierten en elementos de lista con casillas desactivadas, igual que las muestra GitHub.
  • Las tablas se convierten en un marcado <table> simple con <thead> y <tbody>. La alineación de columnas definida con dos puntos en la fila separadora se escribe como atributo align.
  • No se incluye ningún estilo. La vista previa aplica una hoja de estilos ligera para que puedas leerla, pero el HTML copiado hereda el CSS que tenga la página de destino.

La descarga envuelve el fragmento en una página independiente mínima: un documento <!doctype html> con <meta charset="utf-8"> y un <title> tomado del primer título, para que las letras acentuadas y el resto del texto no ASCII se vean bien al abrir el archivo desde el disco. No añade estilos, así que la página usa los valores por defecto del navegador.

Saltos de línea y otras sorpresas

La mayor parte de la confusión con Markdown viene de unas pocas reglas que difieren de un procesador de textos:

  • Un solo salto de línea no es una línea nueva. Dos líneas escritas una debajo de otra se unen en un mismo párrafo. Deja una línea en blanco para empezar un párrafo nuevo, o termina una línea con dos espacios o una barra invertida para forzar un <br>. Algunos editores, incluidos los comentarios de GitHub, tratan los saltos simples como saltos de línea; este conversor sigue el comportamiento estándar que usan los README de GitHub y la mayoría de los generadores de sitios estáticos.
  • El front matter no se reconoce. Un bloque YAML entre líneas --- al principio de un archivo se renderiza como una línea horizontal seguida de texto, y el --- de cierre puede convertir la línea anterior en un título. Quita el front matter antes de convertir.
  • Las notas al pie, las fórmulas y los diagramas no forman parte del dialecto. $x^2$ se queda como texto literal y un bloque Mermaid se convierte en un bloque de código normal. La sintaxis de notas al pie sale peor que ignorada: una definición como [^1]: nota se lee como una referencia de enlace, así que la marca se convierte en un enlace que apunta a la palabra nota.
  • Las comillas se quedan rectas. No se insertan comillas ni rayas tipográficas; lo que escribes es lo que obtienes.
  • Una lista numerada que no empieza en 1 no puede ir directamente debajo de un párrafo. Líneas como 3. tres se absorben en el texto del párrafo salvo que las separe una línea en blanco. Las listas con viñetas y las que empiezan en 1 no tienen este problema.

HTML en bruto y seguridad

Markdown permite HTML en bruto, y este conversor lo deja pasar sin cambios. Un bloque <details> o un <span style> que hayas escrito a mano aparecerá en el resultado tal cual. Es útil, pero también significa que el resultado no está saneado: una etiqueta <script> o un atributo onerror en el original estarán presentes en el HTML copiado.

La vista previa en sí se ejecuta en un marco aislado con los scripts desactivados, así que ver aquí Markdown de origen dudoso es seguro. Pegar el HTML resultante en tu propio sitio es otra cosa. Si el Markdown viene de usuarios o de otra fuente no fiable, pasa el HTML por un saneador por tu parte antes de publicarlo.

Conversiones relacionadas

Para hacer el camino inverso, de una página web o una exportación de un CMS de vuelta a Markdown, usa HTML a Markdown. Para documentos de Word, DOCX a Markdown produce Markdown que luego puedes previsualizar y convertir aquí. Todo se ejecuta en tu navegador mientras escribes, así que los borradores y la documentación interna nunca se envían a un servidor.

Preguntas frecuentes

¿Qué variante de Markdown admite?

GitHub Flavored Markdown: tablas, listas de tareas, tachado, bloques de código delimitados y autolinks, sobre la base de CommonMark.

¿El HTML es una página completa?

El resultado que se muestra y se copia es el fragmento del cuerpo, listo para pegar en un CMS o plantilla. La descarga lo envuelve en un documento HTML5 mínimo con codificación UTF-8 y un título tomado del primer encabezado.

¿Se sube mi texto?

No. La conversión y la vista previa ocurren en tu navegador.

¿Puedo convertir HTML a Markdown?

Sí, con la herramienta independiente Convertir HTML a Markdown, que transforma HTML pegado o una página web exportada de nuevo en Markdown limpio.

¿Se ejecutan scripts en la vista previa?

No. La vista previa está aislada; el HTML sin procesar de tu Markdown se muestra pero no puede ejecutar scripts.

Herramientas relacionadas