Visor de Markdown
Vista previa de Markdown en tiempo real con exportación a PDF (texto seleccionable, mediante Guardar como PDF) o a HTML. Admite el Markdown al estilo de GitHub (tablas, bloques de código, enlaces automáticos) y diagramas Mermaid en bloques ```mermaid. Tu texto se guarda en local, así que sigue ahí si recargas la página, y nunca sale de tu navegador.
Aquí aparecerá la vista previa. Pulsa Cargar ejemplo para empezar enseguida.
0 palabras · 0 caracteres · 0 líneas
Cómo funciona
Escribe o pega el Markdown en el editor de la izquierda y la vista previa con formato aparece a la derecha mientras escribes. El visor admite el Markdown al estilo de GitHub (GFM): títulos, párrafos, negrita, cursiva y tachado, listas numeradas y con viñetas, enlaces, imágenes, tablas, bloques de código, citas, líneas horizontales, listas de tareas y HTML en línea filtrado.
El funcionamiento es sencillo y se basa en estándares. El texto Markdown pasa por marked, un analizador de Markdown rápido y fiel a la especificación, con las extensiones de GFM activadas. El HTML resultante pasa después por DOMPurify, que elimina el marcado peligroso (etiquetas script, controladores de eventos, URL javascript:, atributos sospechosos) antes de que llegue a la página. Ese segundo paso es importante: un archivo .md que te haya llegado de otra persona no debe poder ejecutar JavaScript en esta página.
Diagramas Mermaid: los bloques de código marcados como ```mermaid se convierten en diagramas SVG dentro de la vista previa, desde diagramas de flujo hasta de secuencia y de clases, con toda la sintaxis de Mermaid. La biblioteca Mermaid se descarga solo la primera vez que el documento contiene de verdad un bloque mermaid, así que no pesa en los documentos que no la usan. Si un diagrama tiene un error de sintaxis, en su lugar aparece un mensaje de error legible y el resto de la vista previa sigue funcionando.
Tres modos de visualización: • En paralelo: editor y vista previa uno junto al otro (el predeterminado). Ideal mientras escribes. • Vista previa: solo la vista previa, a todo el ancho. Ideal para leer o antes de exportar. • Código: solo el editor, para escribir sin distracciones.
Exportar: • Exportar PDF coloca solo el contenido con formato en un documento limpio, maquetado para imprimir, y abre el cuadro de impresión del navegador: elige “Guardar como PDF” y obtendrás un PDF con texto seleccionable y con función de búsqueda, con los saltos de página que gestiona el navegador. • Imprimir abre el cuadro de impresión sobre la página, con una hoja de estilo de impresión que oculta la barra de herramientas y el editor. • Descargar .md guarda el código Markdown en un archivo .md que puedes conservar o subir a git. • Descargar .html guarda el HTML generado dentro de un documento HTML5 mínimo, para incrustarlo o seguir editándolo. • Copiar HTML copia el HTML generado al portapapeles, para pegarlo en un gestor de contenidos o en un correo.
Vincular archivo: en los navegadores que admiten la File System Access API (Chrome y Edge, por ejemplo) puedes abrir un archivo .md del disco y mantenerlo sincronizado en ambos sentidos. Los cambios que haces aquí se guardan en el archivo automáticamente y, si el archivo cambia en otro programa, el contenido nuevo se recarga. Si el archivo cambia mientras tienes cambios sin guardar, la herramienta te pregunta si prefieres recargar desde el disco o conservar los tuyos.
El texto se guarda en localStorage mientras escribes, así que puedes cerrar la pestaña y volver más tarde sin perder nada; el modo de visualización también se recuerda. No se sube nada a ningún servidor: la pestaña Red de las herramientas para desarrolladores no muestra peticiones mientras escribes, visualizas y exportas.
Preguntas frecuentes
¿Cómo se abre y se lee un archivo .md?
- Abre el archivo con un editor de texto, copia el contenido y pégalo en el editor: la vista previa con formato aparece al momento. En Chrome y Edge también puedes usar Vincular archivo, que abre el .md del disco y guarda en él los cambios que haces.
¿Cómo convierto un Markdown a PDF?
- Pulsa Exportar PDF y, en el cuadro de impresión, elige “Guardar como PDF” como destino. El PDF contiene solo el documento con formato, con texto seleccionable y con función de búsqueda, sin la barra de herramientas ni el editor.
¿Qué Markdown admite?
- El Markdown al estilo de GitHub (GFM), mediante la biblioteca marked. Incluye todo CommonMark (títulos, listas, enlaces, imágenes, bloques de código, citas) más las extensiones de GFM: tablas, enlaces automáticos, bloques de código delimitados, tachado y listas de tareas. El HTML en línea se interpreta pero se filtra: <script>, <iframe>, los controladores de eventos y las URL javascript: se eliminan.
¿Es seguro pegar Markdown de fuentes desconocidas?
- Sí. Cuando marked lo ha convertido a HTML, DOMPurify elimina cualquier elemento o atributo que no esté en su lista de seguros antes de insertar el resultado en la página. Un archivo .md que te haya enviado un desconocido puede mostrar contenido extraño, pero no puede ejecutar scripts en tu navegador.
¿Se guarda mi trabajo?
- Sí. Cada cambio se guarda automáticamente en localStorage, así que puedes cerrar la pestaña, volver al día siguiente y encontrar tu texto. Pulsa Vaciar para empezar de cero. El modo de visualización (En paralelo, Vista previa, Código) también se recuerda.
¿Admite tablas y bloques de código?
- Sí. Las tablas usan la sintaxis de barras verticales de GitHub con la fila de separación bajo el encabezado. Los bloques de código usan tres acentos graves o una sangría de cuatro espacios, y el código en línea, un acento grave simple. Se muestran con fuente monoespaciada y un fondo suave, sin resaltado de sintaxis, para mantener la herramienta ligera.
¿Admite fórmulas LaTeX o ecuaciones?
- No. Un motor de fórmulas como KaTeX añadiría unos 250 KB comprimidos, que dejamos fuera. Las fórmulas como $x = a + b$ aparecen como texto normal. Si necesitas mostrar fórmulas, usa una herramienta específica como StackEdit o HackMD.
¿Muestra diagramas Mermaid?
- Sí. Escribe la sintaxis de Mermaid en un bloque ```mermaid y se convierte en un diagrama SVG en la vista previa: diagramas de flujo, de secuencia, de clases, de estados y más. La biblioteca Mermaid (unos cientos de KB) se descarga solo cuando el documento contiene un bloque mermaid, así que los documentos de solo texto siguen siendo rápidos. Una sintaxis incorrecta muestra un mensaje de error en lugar del diagrama, sin romper el resto de la vista previa.
¿Se sube mi texto a algún sitio?
- No. El código Markdown, el HTML generado y la exportación a PDF pasan todos por la pestaña de tu navegador. La pestaña Red de las herramientas para desarrolladores no muestra peticiones salientes durante todo el trabajo, y el guardado automático usa el localStorage de tu dispositivo.
Sintaxis de Markdown más usada
Recordatorio de las formas de Markdown más comunes. Pega cualquiera en el editor para ver el resultado al instante.
| Elemento | Markdown | Resultado |
|---|---|---|
| Título 1 | # Título | Título grande con borde inferior |
| Título 2 | ## Sección | Título de sección con borde más fino |
| Negrita | **negrita** | **negrita** |
| Cursiva | *cursiva* | *cursiva* |
| Tachado | ~~tachado~~ | ~~tachado~~ |
| Código en línea | `código` | Texto monoespaciado dentro de la línea |
| Bloque de código | ```js\ncódigo\n``` | Bloque de código delimitado |
| Enlace | [texto](url) | Enlace en el que se puede hacer clic |
| Imagen |  | Imagen dentro del texto, ancho máximo 100% |
| Lista con viñetas | - elemento | Lista con puntos |
| Lista numerada | 1. elemento | Lista con números |
| Cita | > citado | Cita con sangría y borde lateral |
| Línea horizontal | --- | Línea fina de separación |
| Tabla | | t1 | t2 |\n|----|----|\n| a | b | | Tabla con bordes y fila de encabezado |
| Lista de tareas | - [x] hecho | Casilla de verificación con etiqueta |
| Diagrama Mermaid | ```mermaid\nflowchart LR\nA-->B\n``` | Diagrama SVG en la vista previa |
El Markdown al estilo de GitHub (GFM) se admite en todas partes. El HTML en línea está permitido para maquetaciones avanzadas pero se filtra: las etiquetas script e iframe se eliminan automáticamente. Los diagramas Mermaid (bloques ```mermaid) se convierten en SVG.