Guía de Sintaxis Markdown: De lo Básico a lo Avanzado

¿Qué es Markdown y por qué deberías usarlo?

Markdown es un lenguaje de marcado ligero creado por John Gruber en 2004. Su objetivo es permitir escribir texto con formato usando una sintaxis tan sencilla que sea legible incluso sin renderizar. En lugar de etiquetas HTML complejas o menús de formato, Markdown usa caracteres simples como #, * y - para dar estructura al texto.

Hoy Markdown se usa en todas partes: GitHub, GitLab, Reddit, Stack Overflow, Notion, Obsidian, Discord, Slack, documentación técnica, blogs, emails y mucho más. Aprenderlo es una inversión que amortizas rápidamente si trabajas con texto de forma habitual.

Sintaxis básica de Markdown

Encabezados

Los encabezados se crean con el símbolo #. El número de almohadillas indica el nivel:

# Encabezado nivel 1
## Encabezado nivel 2
### Encabezado nivel 3

Usa los niveles de forma jerárquica. No saltes del nivel 1 al 3 sin pasar por el 2.

Formato de texto

• Negrita: **texto en negrita** o __texto en negrita__
• Cursiva: *texto en cursiva* o _texto en cursiva_
• Negrita y cursiva: ***texto***
• Tachado: ~~texto tachado~~

Listas

Listas no ordenadas con -, * o +:

- Primer elemento
- Segundo elemento
  - Sub-elemento

Listas ordenadas con números seguidos de punto:

1. Primer paso
2. Segundo paso
3. Tercer paso

Enlaces e imágenes

Enlaces

La sintaxis básica de un enlace es: [texto del enlace](url). Por ejemplo:

[Visita nuestro sitio](https://onlinetools4free.com)

Para enlaces con título (tooltip al pasar el ratón):

[texto](url "Título del enlace")

Imágenes

Las imágenes usan la misma sintaxis que los enlaces pero con un ! al inicio:

![Texto alternativo](url-de-la-imagen)

El texto alternativo es importante para accesibilidad y SEO. Descríbelo siempre de forma significativa.

Código y bloques de código

Para código en línea, envuélvelo con acentos graves simples: `código`.

Para bloques de código con resaltado de sintaxis, usa tres acentos graves con el nombre del lenguaje:

```javascript
const saludo = "Hola mundo";
console.log(saludo);
```

Los lenguajes más comunes soportados son: javascript, python, html, css, bash, json, sql, typescript, java, go, rust, php y muchos más.

Tablas y elementos avanzados

Tablas

Las tablas se crean con barras verticales y guiones:

| Columna 1 | Columna 2 | Columna 3 |
|-----------|-----------|-----------|
| Dato 1 | Dato 2 | Dato 3 |

Para alinear el contenido, usa dos puntos en la fila de separación:

• :--- alinea a la izquierda
• :---: centra el contenido
• ---: alinea a la derecha

Citas

Las citas se crean con > al inicio de la línea:

> Esta es una cita.
> Puede ocupar varias líneas.

Línea horizontal

Tres guiones, asteriscos o guiones bajos en una línea sola crean un separador horizontal:

---

Listas de tareas

Soportadas en GitHub, GitLab y muchas aplicaciones:

- [x] Tarea completada
- [ ] Tarea pendiente

Extensiones populares de Markdown

La especificación original de Markdown es intencionalmente limitada. Las extensiones más utilizadas son:

• GitHub Flavored Markdown (GFM): Añade tablas, listas de tareas, tachado y autoenlaces. Es el estándar de facto en el mundo del desarrollo.
• CommonMark: Una especificación estricta que resuelve las ambigüedades de la especificación original. Base de GFM.
• MDX: Permite incluir componentes JSX dentro de Markdown. Popular en documentación técnica con React.
• Notas al pie: [^1] en el texto y [^1]: Texto de la nota al final del documento. Soportado en muchos renderizadores.

Herramientas para trabajar con Markdown

• Editores especializados: Obsidian, Typora y Mark Text ofrecen una experiencia de edición Markdown excelente.
• VS Code: Soporta Markdown de forma nativa con previsualización en tiempo real (Ctrl+Shift+V).
• Generadores de sitios estáticos: Astro, Hugo, Jekyll y Gatsby convierten archivos Markdown en páginas web.

Prueba y previsualiza tu Markdown al instante con nuestro Previsualizador de Markdown.