Cómo previsualizar Markdown online sin subir tus archivos

Markdown está pensado para leerse como texto plano, pero aun así quieres ver cómo queda el documento final: si la tabla está bien alineada, si la lista se anida correctamente y si el bloque de código está resaltado. Una vista previa en directo muestra el resultado renderizado junto al código fuente y lo actualiza con cada pulsación de tecla.

Esta guía compara las formas habituales de previsualizar Markdown, enumera las funciones que marcan la diferencia en el día a día y muestra un flujo de trabajo rápido que abre archivos locales en el navegador, sin instalar nada y sin enviarlos a ningún servidor.

Tres formas de previsualizar Markdown

1. Una vista previa dentro de tu editor de código

VS Code, los IDE de JetBrains y muchos otros editores tienen una vista previa de Markdown integrada. Es una buena opción si ya vives en ese editor. Los inconvenientes: necesitas tener el editor instalado, a menudo hacen falta extensiones para fórmulas y diagramas, y no es algo que puedas pasarle rápidamente a un compañero que solo quiere leer un README.md.

2. Un visor de Markdown online

Una web con un editor a la izquierda y una vista previa a la derecha es la opción más rápida: abres una pestaña y empiezas a escribir. El problema es que las herramientas online varían mucho. Algunas envían tu texto a un servidor para renderizarlo, otras guardan los documentos en tu navegador sin avisarte, y muchas solo admiten la sintaxis básica: sin tablas, sin listas de tareas, sin fórmulas.

3. Un visor autoalojado

Una aplicación web estática alojada por ti combina la comodidad de una web con el control total: vive en tu propio dominio, funciona igual para todo tu equipo y tú decides qué puede y qué no puede hacer. Explicamos esta opción en detalle en cómo alojar tu propio editor de Markdown.

Qué buscar en un visor de Markdown

No todos los visores son igual de agradables de usar. Estas son las funciones que importan cuando usas uno a diario:

• Renderizado instantáneo. La vista previa debe actualizarse mientras escribes, sin botón de «Renderizar» ni retrasos apreciables.
• Desplazamiento sincronizado. En un documento largo, la vista previa debe seguir al editor para que el párrafo que editas esté siempre visible a la derecha.
• GitHub-Flavored Markdown. Las tablas, las listas de tareas, el tachado, las notas al pie y los avisos deben verse igual que en GitHub. Si no sabes qué son, consulta la chuleta de Markdown.
• Resaltado de código para los lenguajes que usas.
• Fórmulas y diagramas si escribes documentación técnica: fórmulas LaTeX y diagramas Mermaid.
• Abrir archivos locales. Arrastrar y soltar debe funcionar con un archivo, con varios y con carpetas completas, incluidas las imágenes a las que hace referencia el documento.
• Exportación. Cuando el documento está terminado, normalmente lo necesitas en HTML, PDF o como un archivo .md limpio.
• Procesamiento local. Lo ideal es que el texto se renderice en tu navegador y nunca salga de tu ordenador. Esto importa en documentación interna, contratos, borradores y notas.

Un flujo de trabajo rápido con Markdown Preview Editor

Markdown Preview Editor es un editor gratuito y de código abierto diseñado justo en torno a esta lista. Así es una sesión típica.

Paso 1: Abre el editor

Abre la versión online o tu propia copia. No hay registro ni nada que instalar. La interfaz está disponible en 15 idiomas y sigue automáticamente el idioma de tu navegador.

Paso 2: Abre tus archivos

Arrastra un archivo .md al editor, o varios archivos a la vez, o una carpeta entera. Cada documento se abre en su propia pestaña con su propio historial de deshacer. Las imágenes, el audio y el vídeo que sueltes junto con el documento aparecen en la vista previa, porque las rutas relativas se resuelven a partir de la carpeta que has soltado.

¿Prefieres el teclado? Pulsa Ctrl+O (⌘O en Mac) para elegir archivos o usa el botón Carpeta para abrir un directorio.

Paso 3: Escribe con la vista previa al lado

Escribe en el editor de la izquierda; la vista previa de la derecha se actualiza al momento y se desplaza contigo. La barra de formato inserta encabezados, listas, enlaces, tablas y bloques de código. Las herramientas menos habituales —notas al pie, avisos, fórmulas, diagramas— están en la fila plegable Editor avanzado, para que la barra se mantenga despejada.

Cambia entre tres modos de vista con un clic: solo editor, vista dividida y solo vista previa. En el móvil el diseño se adapta automáticamente y la barra de herramientas se pliega hasta que la necesitas.

Paso 4: Guarda o exporta

Cuando termines, guarda el documento como .md, expórtalo como archivo HTML independiente o imprímelo en PDF. El artículo sobre cómo convertir Markdown a HTML y PDF explica las opciones en detalle.

¿Adónde van tus archivos?

Con muchas herramientas web no es fácil saber si tu texto se sube a algún sitio. Una prueba útil: abre las herramientas para desarrolladores del navegador, ve a la pestaña Red (Network) y escribe algo. Si aparecen peticiones nuevas mientras escribes, puede que tu texto esté saliendo de la página.

Markdown Preview Editor lo renderiza todo en el navegador. Los archivos que abres se leen en local, y los documentos solo se conservan en la pestaña abierta, a menos que actives Recordar documentos en los ajustes. Las imágenes y los enlaces externos de un documento no se cargan hasta que los permites, así que abrir un archivo tampoco contacta con otros servidores.

Consejos para una vista previa más cómoda

• Guarda las imágenes junto al documento, en una carpeta images/ o assets/, y enlázalas con rutas relativas. Después suelta la carpeta completa y todo aparecerá.
• Usa un solo encabezado # por archivo. Se convierte en el título del HTML exportado y facilita moverse por documentos largos.
• Activa los números de línea en los ajustes cuando colabores en documentación: comentarios de revisión como «línea 42» se siguen con facilidad.
• Usa el modo oscuro por la noche. La vista previa cambia de tema junto con el editor.