Cómo ver archivos Markdown en VS Code

Visual Studio Code renderiza Markdown de serie, así que no necesitas instalar ninguna extensión para ver un archivo .md con su formato aplicado. Es la duda más repetida y la respuesta es que ya lo tienes.

Al abrir un .md verás el texto con el resaltado de sintaxis del editor, es decir con los asteriscos y las almohadillas a la vista. Eso no es un error: es el modo de edición. Para ver el documento renderizado hay que abrir la vista previa, que es una pestaña aparte.

Abrir la vista previa

Con el archivo .md abierto, pulsa el atajo de vista previa y se abrirá una pestaña nueva con el documento ya formateado.

Ctrl+Shift+V     en Windows y Linux
Cmd+Shift+V      en macOS

También puedes llegar por otras dos vías, por si el atajo choca con algo que ya tengas asignado. La primera es el icono de lupa con una hoja que aparece arriba a la derecha cuando el archivo abierto es Markdown. La segunda es la paleta de comandos, con Ctrl+Shift+P, escribiendo el nombre del comando de vista previa de Markdown.

Ver el editor y la vista previa a la vez

Esta es la forma más cómoda de trabajar, porque escribes a la izquierda y ves el resultado actualizarse a la derecha en tiempo real.

Ctrl+K y despues V     en Windows y Linux
Cmd+K y despues V      en macOS

Es una combinación en dos pasos: primero pulsas Ctrl+K, sueltas, y después pulsas V. El editor divide la ventana y coloca la vista previa al lado.

Las dos vistas se desplazan sincronizadas, así que al bajar por el editor la previsualización sigue la misma posición. Si prefieres que cada una vaya por su cuenta, puedes desactivarlo en los ajustes buscando la opción de sincronizar el desplazamiento de la vista previa de Markdown.

¿Hace falta instalar algo?

No. La vista previa, el resaltado de sintaxis, el plegado de secciones y el esquema del documento vienen incluidos en VS Code sin instalar nada.

Dicho esto, hay extensiones que añaden cosas que el editor no trae. Estas son las que más se usan:

• Markdown All in One: atajos de teclado para negrita y cursiva, continuación automática de listas, tabla de contenidos generada y ayuda al escribir tablas.
• markdownlint: avisa de problemas de estilo y de sintaxis mientras escribes, como encabezados mal anidados o líneas en blanco de más.
• Markdown Preview Enhanced: una vista previa alternativa con soporte para diagramas, fórmulas y exportación a varios formatos.
• Markdown PDF: exporta el documento a PDF, HTML o imagen desde el propio editor.

Tienes el detalle de configuración de cada una en nuestro artículo sobre Markdown en VS Code.

Si el archivo no se ve como Markdown

A veces se abre un archivo y VS Code lo trata como texto plano, sin resaltado ni vista previa disponible. Casi siempre es por una de estas dos razones.

La primera es que la extensión del archivo no sea .md. Comprueba el nombre completo, porque un notas.md.txt se abre como texto normal. Si es el caso, renombra el archivo.

La segunda es que el modo de lenguaje esté mal detectado. En la barra de estado, abajo a la derecha, aparece el lenguaje del archivo actual. Si pone algo distinto de Markdown, haz clic ahí y selecciona Markdown en la lista. El cambio afecta solo a esa sesión, y se arregla de forma permanente corrigiendo la extensión del archivo.

Cambiar el aspecto de la vista previa

Por defecto la vista previa usa el tema del editor, así que en modo oscuro el documento se ve oscuro. Si quieres que se parezca más al resultado final publicado, puedes aplicarle tu propia hoja de estilos.

En los ajustes de VS Code, busca la opción de estilos de la vista previa de Markdown y añade la ruta de un archivo CSS. Admite tanto rutas relativas al espacio de trabajo como direcciones web.

{
  "markdown.styles": ["estilos/vista-previa.css"]
}

Otro ajuste que conviene conocer es el de saltos de línea. Por defecto, un salto de línea simple no genera un salto en el resultado, siguiendo el estándar. Si vienes de una herramienta donde sí lo hacía, puedes activarlo:

{
  "markdown.preview.breaks": true
}

Ten en cuenta que esto solo afecta a cómo lo muestra VS Code. En otras aplicaciones el archivo se seguirá viendo según sus propias reglas, así que para forzar saltos de línea de forma portable es mejor usar la sintaxis oficial.

Exportar lo que ves

La vista previa no tiene un botón de exportar propio, pero hay dos caminos.

El primero es imprimir desde la propia vista previa usando la opción del navegador integrado, que permite guardar como PDF. El segundo, más fiable, es usar una extensión de exportación o pasar el archivo por nuestros conversores de Markdown a PDF, Markdown a DOCX o Markdown a HTML, que funcionan en el navegador sin instalar nada.

Atajos útiles con archivos Markdown

Estos son los que más se usan al trabajar con documentos .md en el editor.

En macOS se sustituye Ctrl por Cmd en todos ellos.

Otras formas de ver un archivo .md

VS Code no es la única opción, y según el caso hay alternativas más rápidas.

Si solo necesitas leer un archivo suelto, súbelo a un repositorio de GitHub o pégalo en un editor online, que lo renderizan al momento. Si vas a escribir mucho, una aplicación dedicada como Obsidian o Typora resulta más cómoda que un editor de código.

Y si todavía no has creado el archivo, empieza por cómo crear un archivo .md.

Y con esto ya hemos terminado. Espero que te haya resultado de ayuda.