Vista previa de Markdown y conversión a HTML

Escribe o pega Markdown y la vista previa se actualiza mientras escribes. Copia el HTML o descárgalo como archivo.

Vista previa

La vista previa aparece aquí.

Funciona por completo en tu navegador. Nada de lo que escribes se envía ni se guarda.

Cómo usar

  1. Escribe o pega Markdown en el cuadro izquierdo.
  2. Revisa el resultado a la derecha; se actualiza al escribir.
  3. Pulsa “Copiar HTML” o “Descargar HTML” para llevarte el HTML.

Markdown es el formato de texto plano que se usa en archivos README, issues de GitHub, wikis, apps de notas y muchos blogs. Aquí puedes ver cómo quedará un documento antes de publicarlo, o convertir Markdown en HTML para pegarlo en un CMS o en una plantilla de correo. La vista previa se actualiza en cuanto dejas de escribir.

El renderizado usa markdown-it 12.3.2 con HTML, saltos de línea y enlaces automáticos activados, más el complemento markdown-it-emoji. Como los saltos de línea están activados, un solo Enter produce un <br>; CommonMark estricto y muchos sitios unirían esas líneas en un párrafo, así que el resultado puede diferir del lugar donde publiques. Los bloques de código se colorean con highlight.js 11.4.0, que incluye 34 lenguajes comunes; el resto se muestra sin color.

Todo pasa por DOMPurify 3.2.6 antes de mostrarse o copiarse, por lo que se eliminan los scripts y atributos de eventos del HTML pegado. La descarga es un fragmento HTML sin estilos, listo para insertarlo en una página que ya tenga su propio CSS. La conversión ocurre en el navegador y tu texto no se sube, aunque las imágenes que enlaces por URL se cargan desde sus propios servidores, como en cualquier página web.

Preguntas frecuentes

¿Qué sintaxis de Markdown admite?

CommonMark con markdown-it, más tablas, tachado (~~texto~~), códigos de emoji como :smile: y enlaces automáticos para URL. Un salto de línea simple se convierte en <br>.

¿Puedo usar HTML dentro del Markdown?

Sí. Se permite HTML, pero el resultado se limpia con DOMPurify: se eliminan las etiquetas <script>, los atributos de evento on… y los enlaces javascript:, así que nada del texto se ejecuta.

¿Se resalta el código?

Sí. Los bloques de código cercados se colorean con highlight.js. Indica el lenguaje tras las comillas (```js) o deja que lo detecte.

Herramientas relacionadas