Vista previa de Markdown — En vivo y copia el HTML
Un editor de Markdown en vivo con HTML saneado que puedes copiar o guardar
Funciona en tu navegador · no se sube nada
Si lo activas, el texto se guarda solo en este navegador y nunca se envía a un servidor. Al desactivarlo se borra el texto guardado.
Vista previa
Cargando el motor de vista previa…
El HTML de la vista previa se sanea siempre: se eliminan los scripts, los atributos de evento, los enlaces javascript:, los iframes y los formularios. Si tu texto tiene URL de imágenes, tu navegador descarga esas imágenes directamente desde sus direcciones.
Qué es
La vista previa de Markdown muestra el resultado renderizado junto a tu Markdown mientras escribes. Es práctica para revisar un README, el borrador de una entrada de blog, documentación técnica o unas notas de reunión antes de publicarlos. Funcionan los encabezados, las listas, las citas y los bloques de código, y también las extensiones de GitHub Flavored Markdown: tablas, tachado y listas de tareas. El resultado se sanea siempre antes de mostrarse, así que pegar texto de una fuente desconocida no ejecutará ningún script.
Cómo se usa
- Escribe o pega Markdown en el cuadro de la izquierda. Al principio hay un ejemplo corto, y el botón Borrar lo vacía.
- La vista previa de la derecha se actualiza un momento después de que dejes de escribir. Revisa a simple vista la alineación de las tablas y las listas anidadas.
- Pulsa Copiar HTML para llevar al portapapeles el fragmento HTML saneado, listo para un editor en modo HTML o una plantilla de correo.
- Guardar .md descarga tu texto original. Guardar .html descarga un documento HTML completo con una hoja de estilos sencilla. El nombre del archivo se toma de tu primer encabezado de nivel uno.
- Para seguir más tarde, activa la opción de borrador. El texto se guarda solo en este navegador.
Cómo funciona
- Analizador: marked (licencia MIT) convierte el texto en HTML según la especificación GFM. Como dice el estándar, un salto de línea simple no se convierte en salto visible salvo que la línea termine con dos espacios o vaya seguida de una línea en blanco.
- Saneamiento: DOMPurify (Apache-2.0 o MPL-2.0, usado aquí con Apache-2.0) limpia el HTML antes de mostrarlo. Se eliminan las etiquetas script, iframe, object, form y style, los atributos de evento que empiezan por on, los atributos style y los enlaces con direcciones javascript: o data:.
- Enlaces: los enlaces que quedan se abren en una pestaña nueva con rel=“noopener noreferrer”.
- Casillas: las casillas de las listas de tareas están siempre desactivadas, así que la vista previa es de solo lectura.
- Imágenes: las direcciones de las imágenes se dejan tal cual, así que tu navegador las pide directamente a sus servidores, y esos servidores pueden ver la petición.
- Archivos: .md es tu texto exacto en UTF-8. .html es un documento UTF-8 con atributo lang y una hoja de estilos mínima.
Ejemplos
| Escribes | Obtienes |
|---|---|
**negrita** |
negrita |
~~borrado~~ |
|
- [x] hecho |
una casilla marcada seguida de «hecho» |
[enlace](https://example.com) |
un enlace que se abre en una pestaña nueva |
[clic](javascript:alert(1)) |
la dirección se elimina y solo queda el texto |
<script>alert(1)</script> |
no se ejecuta nada |
Una tabla se escribe así. Los dos puntos de la segunda fila fijan la alineación.
| Artículo | Cant. |
|:---|---:|
| Manzana | 3 |Preguntas frecuentes
¿Se envía mi Markdown a un servidor?
No. El renderizado y el saneamiento se hacen en tu navegador y no se sube nada de lo que escribes. El texto solo se guarda en este navegador si activas la opción de borrador, y al desactivarla se borra. Una salvedad: si tu texto apunta a una imagen externa, tu navegador la carga directamente desde su dirección.
¿Se ejecutará una etiqueta script de mi texto?
No. El HTML renderizado pasa siempre por DOMPurify antes de mostrarse, y eso elimina las etiquetas script, los atributos de evento como onclick y onerror, los enlaces javascript, los iframes, los formularios y las etiquetas style. El HTML que copias o descargas es la versión saneada.
¿Cómo escribo una tabla o una lista de tareas?
Para una tabla, separa las columnas con barras verticales y pon una fila de guiones debajo del encabezado. Dos puntos en el extremo izquierdo de esa fila alinean a la izquierda y en el extremo derecho, a la derecha. Para una lista de tareas, empieza un elemento con - [ ] o - [x]. La vista previa muestra casillas de solo lectura. Ambas son funciones de GitHub Flavored Markdown.
¿Se verá exactamente igual que en GitHub o en mi blog?
La sintaxis se interpreta igual, pero las fuentes, los espacios y los colores los decide cada servicio. Usa esta página para comprobar que tu Markdown se interpreta como querías. El archivo .html descargado solo incluye una hoja de estilos sencilla y legible.
¿Qué longitud puede tener el texto?
Hasta 500.000 caracteres. Por encima, la vista previa se detiene y muestra un aviso, así que pega los documentos muy largos por partes.
