Guía completa de sintaxis Markdown con previsualización interactiva
Markdown tiene una sintaxis sencilla que se aprende en menos de treinta minutos, pero hay elementos como las tablas, los bloques de código con resaltado, las listas anidadas y los anchors de enlace que pueden ser confusos al principio. La mejor forma de aprender es escribir y ver el resultado en tiempo real. Esta guía cubre todos los elementos de sintaxis Markdown que necesitas para escribir documentación, artículos de blog o archivos README, con ejemplos que puedes probar directamente en la Vista Previa Markdown de WikiPlus.
Encabezados, énfasis y formato básico
Los encabezados se crean con el carácter '#' seguido de un espacio: '#' para h1, '##' para h2, hasta '######' para h6. El **texto en negrita** se escribe con dobles asteriscos o dobles guiones bajos alrededor de la palabra. El *texto en cursiva* usa simples asteriscos o simples guiones bajos. El ~~texto tachado~~ usa dobles tildes (extensión GFM). El `código inline` usa backticks simples. Las citas en bloque usan '>' al principio de la línea. Los separadores horizontales se crean con tres guiones '---' o tres asteriscos '***' en una línea propia. Los saltos de línea dentro de un párrafo se crean añadiendo dos espacios al final de la línea antes del salto, o usando una línea en blanco para un nuevo párrafo.
Listas ordenadas, no ordenadas y de tareas
Las listas no ordenadas usan guiones '-', asteriscos '*' o signos '+' seguidos de un espacio. Las listas ordenadas usan números seguidos de punto. Las listas anidadas se crean añadiendo cuatro espacios de indentación antes del marcador del ítem hijo. Las listas de tareas (extensión GFM) usan '- [ ]' para ítems sin completar y '- [x]' para ítems completados; se renderizan como casillas de verificación en GitHub y otras plataformas GFM. Los ítems de lista que contienen varios párrafos requieren una línea en blanco entre el primer párrafo y el siguiente, con el segundo párrafo indentado al nivel del texto del primer ítem.
Bloques de código, tablas y HTML inline
Los bloques de código se crean con tres backticks en una línea propia, seguidos opcionalmente del nombre del lenguaje para activar el resaltado. Las tablas usan pipes '|' como separadores de columnas y una fila de guiones '---|' como separador del encabezado. La alineación de columnas se controla con ':' en la fila de guiones. Los bloques de HTML crudo se pasan directamente al resultado en CommonMark, lo que permite usar etiquetas HTML cuando Markdown no ofrece el elemento necesario. Los comentarios HTML '<!-- comentario -->' también pasan al renderizado y son útiles para añadir notas que no aparecen en la salida final.
Imágenes, enlaces y referencias
Los enlaces inline usan la sintaxis '[texto](url)'. Los enlaces con título usan '[texto](url "Título del enlace")'. Las referencias permiten definir las URLs al final del documento con el formato '[id]: url' y referenciarlas en el texto con '[texto][id]'. Las imágenes siguen la misma sintaxis que los enlaces pero con '!' al principio: ''. Los autolinks para URLs (extensión GFM) convierten automáticamente URLs que empiezan con 'http://' o 'https://' en enlaces clicables sin necesidad de la sintaxis de corchetes. Los emails también se convierten automáticamente. Los footnotes no son parte del estándar CommonMark pero son soportados por muchos parsers como PHP Markdown Extra y Pandoc.
Preguntas frecuentes
- ¿Qué diferencia hay entre Markdown y HTML?
- Markdown es un lenguaje de marcado ligero diseñado para ser legible como texto plano. HTML es el lenguaje de marcado de la web con etiquetas verbosas. Markdown se convierte a HTML al renderizarse. Para documentación y escritura, Markdown es más rápido de escribir y más legible como texto fuente. Para control fino del diseño y la semántica, HTML es más potente. En CommonMark puedes mezclar ambos: el Markdown que no puede expresar algo se puede complementar con HTML inline.
- ¿Puedo usar Markdown para crear presentaciones?
- Sí. Herramientas como Marp, Reveal.js y Slidev usan Markdown como fuente para crear presentaciones de diapositivas. Cada diapositiva se separa con '---'. La Vista Previa de WikiPlus renderiza el Markdown estándar, pero la lógica de separación de diapositivas es específica de cada herramienta. Puedes usar la Vista Previa para verificar el contenido y el formato de cada diapositiva individualmente antes de importarlo a la herramienta de presentaciones.
- ¿Hay atajos de teclado para formatear en la Vista Previa?
- La Vista Previa de WikiPlus es un área de texto estándar sin atajos de teclado de formateo adicionales más allá de los del sistema operativo. Para escritura con más atajos de teclado de Markdown, considera editores como Typora, Mark Text o VS Code con la extensión de Markdown, que ofrecen atajos para negrita, cursiva, inserción de enlaces e imágenes. Una vez terminado el borrador en esos editores, puedes pegarlo en la Vista Previa para verificar el renderizado.