Vista previa de Markdown
Escribe Markdown con vista previa HTML en vivo al lado: tablas GFM, listas de tareas y tachado. Copia HTML saneado o descarga un archivo .html.
Tus datos de entrada y archivos no salen del navegador
Escribe o pega Markdown aquí, o carga un ejemplo.
La vista previa aparece aquí mientras escribes.
En esta página
Escribe Markdown en un lado y ve el resultado renderizado en el otro mientras escribes: ideal para borradores de README, comentarios en issues, documentación y notas de versión que luego exportas como HTML.
Funcionalidad detallada
El renderizado usa la biblioteca marked con GitHub Flavored Markdown: tablas, listas de tareas - [x], tachado ~~text~~, bloques de código delimitados y enlaces automáticos para URL sueltas. Un solo salto de línea se convierte en <br>, como en los comentarios de GitHub, así que las líneas no se funden en un párrafo. Los bloques de código se muestran en fuente monoespaciada sin coloreado de sintaxis.
El HTML en bruto dentro del Markdown se sanea: se eliminan scripts, iframes, formularios, estilos y atributos de evento como onclick, y se bloquean los enlaces javascript:, mientras que etiquetas inofensivas como <kbd>, <details> o <sub> se conservan. Los enlaces se abren en una pestaña nueva. En la vista previa los encabezados se muestran un nivel más abajo para no competir con el título de la página; Copiar HTML y Descargar HTML mantienen los <h1>–<h6> originales.
La barra de herramientas inserta en el cursor la sintaxis de negrita, cursiva, encabezado, enlace, imagen, código en línea y lista, y Sincronizar desplazamiento mantiene ambos paneles en la misma posición relativa. Todo funciona en el navegador y la herramienta no guarda tu texto: cópialo antes de cerrar la página.
Ejemplos prácticos
Lista de tareas: - [x] tests y - [ ] docs se muestran como una casilla marcada y otra sin marcar.
Saltos de línea: las dos líneas line one y line two ~~old~~ se convierten en <p>line one<br>line two <del>old</del></p>.
Tabla: las filas | A | B |, |---|---|, | 1 | 2 | se convierten en una tabla HTML con fila de encabezado.
HTML inseguro: <script>alert(1)</script><b onclick=x>hi</b> se exporta solo como <b>hi</b>.
Cómo usar esta herramienta
Escribe Markdown
Escribe en Editor de Markdown. La primera vez se muestra un documento de ejemplo; pulsa Limpiar para empezar con una página vacía.
Da formato con la barra
Selecciona texto y usa los botones de formato (negrita, cursiva, encabezado, enlace, imagen, código, lista) para insertar la sintaxis.
Revisa la vista previa
El panel Vista previa se actualiza con cada pulsación; activa Sincronizar desplazamiento para desplazar ambos paneles a la vez.
Exporta
Usa Copiar HTML o Copiar Markdown, o Descargar HTML para guardar
markdown-preview.htmlcon estilos básicos.
Consejos y mejores prácticas
- Las rutas de imagen relativas como
img/logo.pngno se pueden resolver aquí; usa URL completashttps://para ver las imágenes. - Las imágenes de otros sitios las carga tu navegador directamente desde sus servidores.
- Los extras exclusivos de GitHub —
@mentions, códigos de emoji como:smile:, diagramas Mermaid y fórmulas— se muestran como texto normal. - El HTML en línea como
<kbd>Ctrl</kbd>o<details>funciona, pero se eliminan los atributosstyleyclass. - El archivo descargado es una página independiente con estilos claros, lista para imprimir o adjuntar.