Usar VS Code como editor de Markdown

Después de escribir unos 5 textos en Markdown con VS Code, creo que ya he aprendido la mayoría de las formas básicas de usarlo.

Hoy voy a explicar cómo usar VS Code como editor de Markdown.

Solo hay que tocar un poco dos extensiones y el archivo settings.json y listo.

1. Extensiones

Vamos a instalar unos paquetes que solucionan dos cosas molestas a la hora de escribir en Markdown.

Entra en la sección de extensiones de la izquierda y busca "markdown".

Luego instala los paquetes que aparecen en la imagen.

En principio, con un solo paquete "All in One" relacionado con Markdown es suficiente.

Ofrece muchas funciones prácticas como negrita, tablas, listas, etc.

El cargador de imágenes facilita mucho insertar imágenes.

Normalmente habría que pasar por el proceso tedioso de descargar la imagen ➡️ moverla a la carpeta ➡️ insertar el enlace de la imagen.

Con esta extensión basta con copiar la imagen ➡️ pulsar cmd+v y la imagen se guarda dentro de la carpeta y se inserta también en el texto.

2. Probarlo en uso

Cuando abres un archivo Markdown, verás una pestaña más en la parte superior derecha.

Si haces clic ahí, se abre una ventana de vista previa a la derecha.

Al escribir el texto, puedes ver al instante el formato.

Probemos también los atajos de teclado.

Si quieres resaltar una parte del texto, selecciónala y pulsa cmd + b.

El cargador de imágenes es increíblemente útil.

Si tienes una imagen que quieres poner en el Markdown, simplemente cópiala.

Puedes copiar el propio archivo o algo que hayas puesto en el portapapeles desde Internet.

Luego, si pegas en el archivo Markdown, la imagen se inserta en el texto como ves abajo y también se guarda en la carpeta.

3. Si estás escribiendo en .mdx...

Yo actualmente estoy escribiendo textos Markdown con la extensión .mdx.

En este caso, solo hay que retocar un poco el archivo settings.json dentro de .vscode.

{
  "files.associations": {
    "*.html": "html",
    "ostream": "cpp",
    "stdio.h": "c",
    "*.css": "tailwindcss",
    "*.mdx": "markdown", // 이게 핵심!
  },
  "editor.quickSuggestions": {
    "strings": "on"
  }
}

Si lo configuras así, también podrás usar las extensiones de Markdown con los archivos .mdx.

4. Para terminar

Al principio tenía mucha resistencia a escribir textos en Markdown.

Pensaba que para un blog había que usar sí o sí un editor web, pero una vez que me acostumbré a escribir así, me resulta incluso más cómodo que un editor web.

Aunque subas muchas imágenes, no tienes que esperar a que se carguen.

También puedes editar las imágenes con total libertad.

En fin...

Quiero pensar así.