Guía Markdown de VS Code
VS Code es el IDE de programación por excelencia, multiplataforma y open source.
Acerca deVS Code
La primera versión de VS Code se lanzó en el año 2015, y desde entonces su popularidad ha ido creciendo en gran medida. Es importante decir que VS Code no es en sí mismo un editor Markdown como tal, aunque dispone de un plugin oficial de resantado de sintaxis para Markdown, llamado Visual Studio Code extension for MDX. Mediante esta extensión obtendrás resaltado de sintaxis para Markdown.
En cuanto a la edición de Markdown, VS Code no es el editor más cómodo. Sin embargo, todo el texto de la web que estás visitando ahora mismo ha sido redactado en Markdown con VS Code.
La gran ventaja de VS Code con respecto a Markdown es lo bien que se integra con herramientas de desarrollo como Next.js o incluso Laravel.
He creado Tutorial Markdown con Next.js. Redacto los archivos en Markdown y además también tengo la libertad de usar código React en cualquier parte del archivo. De este modo no hay límites.
Otro ejemplo es mi blog personal. He creado el blog con Laravel, en donde también he redactado todo el contenido usando sintaxis Markdown. Del mismo modo, he podido usar la sintaxis de Laravel Blade, su lenguage de plantillas, para insertar componentes creados con Blade, PHP y HTML en donde he querido.
Además de esta gran verstilidad, otra ventaja de VS Code es que si echas de menos alguna funcionalidad o crees que algo no funciona como debería, seguramente exista alguna extensión para solucionarlo. Por otro lado, debes tener en cuanta que no estás ante un editor WYSIWIG, por lo que si no buscas una herramienta técnica, quizás este IDE no sea el más adecuado.
La extensión de Markdown para VS COde soporta la sintaxis Common Mark y además, mediante la extensión adecuada, también es posible previsualizar el resultado a medida que escribes mediante la extensión Markdown Preview Enhanced. Esta extensión también te permitirá exportar documentos a otros formatos.
Otra extensión que te podría resultar útil es la extensión Code Spell Checker, con la que podrás detectar erratas a la hora de escribir.
VS Code dispone nativamente de funciones de autocompletado y podrás escoger entre una infinidad de temas, tanto para su interfaz como para el resaltado de la sintaxis Markdown.
Soporte Markdown
VS Code soporta casi todos los elementos de la sintaxis básica de Markdown. Si algún elemento no está soportado, entoces siempre hay alguna extensión de VS Code con soporte para él.
En la siguiente tabla puedes ver en detalle los elementos Markdown que soporta VS Code:
| Elemento | Soporte | Notas |
|---|---|---|
| Encabezados | Sí | |
| Párrafos | Sí | |
| Saltos de línea | Sí | |
| Negrita | Sí | |
| Cursiva | Sí | |
| Citas | Sí | |
| Listas ordenadas | Sí | |
| Listas no ordenadas | Sí | |
| Código | Sí | Se trata de VS Code, el mejor editor para esto. |
| Línea horizontal | Sí | |
| Enlaces | Sí | |
| Imágenes | Sí | Están soportadas, aunque podrías tener que activar la opción que habilita contenido inseguro para algunas imágenes externas. |
| HTML | Sí | Aunque si vas a usarlo en alguna otra aplicación, depende de ella. |
| Tablas | Sí | |
| Bloques de código avanzados | Sí | No se soporta la sintaxis Markdown para los bloques de código, pero podrás agregarlos mediante el menú de HTML. |
| Resaltado de sintaxis | Sí | La sintaxis Markdown no está soportada, pero puedes especificar el lenguaje mediante la interfaz de Ulysses. |
| Notas al pié | Parcial | Solamente en el editor. Se recomienda el uso de la extensión Markdown Preview Enhanced. |
| IDs de cabecera | Parcial | Los identificadores personalizados necesitan la extensión Markdown Preview Enhanced. |
| Listas de definiciones | Parcial | Se necesita la extensión Markdown Preview Enhanced para su funcionamiento. |
| Texto tachado | Parcial | Se deben usar dos guiones ondulados para delimitar el texto tachado, como en ~~este ejemplo~~. |
| Listas de tareas | Parcial | No se soportan por defecto, aunque sí están soportadas por muchas extensiones, como Markdown Preview Enhanced. |
| Emojis (copiar y pegar) | Sí | |
| Emojis (shortcodes) | Parcial | Se necesita esta extensión. |
| Enlaces automáticos | Sí | |
| Deshabilitar enlaces automáticos | Sí |
Soporte adicional
Ulysses también soporta los siguientes elementos Markdown, aunque no forman parte de la sintaxis Markdown establecida:
| Elemento | Markdown | HTML | Resultado |
|---|---|---|---|
| Resaltado | ::texto resaltado:: | <mark>texto resaltado</mark> | texto resaltado |
Alternativas a VS Code
No existen demasiadas alternativas tan buenas como VS Code si tu intención es la de integrar Markdown con algún proyecto web. Si buscas otra cosa, tienes estas alternativas:
Si buscas un editor que sea más sencillo, podrías probar iA Writer o HackMD.
Si prefieres usar un editor que se ejecute en tu navegado, puedes usar StackEdit o Batnoter.
Si quieres seguir usando VS Code pero necesitas algo más centrado en el uso de Markdown, entonces tu mejor opción es la extensión Dendron.
Más información
Puedes consultar los siguientes enlaces para obtener más información acerca de VS Code:
- Descarga: Descarga VS Code
- Repositorio: Accede al repositorio de VS Code
👋 Hola! Soy Edu, me encanta crear cosas y he redactado este tutorial. Si te ha resultado útil, el mayor favor que me podrías hacer es el de compatirlo en Twitter.
Sígueme en Twitter para estar al día con mi contenido. 😊
