Markdown es un lenguaje de marcado ligero creado en 2004 por John Gruber, trata de conseguir la máxima legibilidad y facilidad de publicación tanto en su forma de entrada como de salida, inspirándose en muchas convenciones existentes para marcar mensajes de correo electrónico usando texto plano.

Facilita la aplicación de formato y estilo a texto plano empleando una serie de caracteres de forma especial.

El objetivo de su creador fue hacer que la gente pudiera escribir usando un formato de texto plano fácil de leer, fácil de escribir y con la posibilidad de convertir su documento en HTML válido.

La gran simpleza de su sintaxis hizo que tuviera una rápida adopción y popularidad en la comunidad de desarrolladores.

Actualmente aparte de permitir generar contenido HTML de forma dinámica, también se emplea (casí de forma estándar) para la creación de documentación técnica y con la proliferación de la arquitectura JAM Stack para la creación de sitios estáticos a través de herramientas de tipo SSG (Static Site Generator) y SSR (Server Side Rendering) como Hugo, Gatsby, Eleventy, Next.js, Sergey, Astro, entre otros, Markdown se ocupa para la generación de contenido editorial (artículos de blog) de forma dinámica.

Sintaxis Markdown

La sintaxis es muy sencilla y cuenta con varias opciones para algunos de sus elementos. Básicamente se trata de añadir ciertos caracteres al inicio o final de la línea o el elemento al que vamos a aplicar el formato.

Párrafos

Código Markdown
Párrafo 1...

Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, voluptatibus, molestiae omnis, voluptas ullam dolorem accusantium cumque minima quod saepe quis corporis eos nemo sequi dolore reiciendis dignissimos? Quis, provident.

Párrafo 3...
Contenido Markdown

Párrafo 1...

Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, voluptatibus, molestiae omnis, voluptas ullam dolorem accusantium cumque minima quod saepe quis corporis eos nemo sequi dolore reiciendis dignissimos? Quis, provident.

Párrafo 3...

🔼 Regresar

Textos

Podemos aplicar algunos estilos al texto como: cursiva, negritas y ~tachado~.

Código Markdown:
_cursiva_

**negrita**

~tachado~

**_cursiva y negrita_**

_~cursiva y tachado~_

**~negrita y tachado~**

**_~cursiva, negrita y tachado~_**
Contenido Markdown:

cursiva

negrita

~tachado~

cursiva y negrita

~cursiva y tachado~

~negrita y tachado~

~cursiva, negrita y tachado~

🔼 Regresar

Encabezados

En HTML existen 6 niveles de encabezados, que nos permite dar jerarquía a los títulos de nuestro contenido. En Markdown tenemos los mismos encabezados.

Código Markdown:
# Encabezado de nivel 1

## Encabezado de nivel 2

### Encabezado de nivel 3

#### Encabezado de nivel 4

##### Encabezado de nivel 5

###### Encabezado de nivel 6
Contenido Markdown:

Encabezado de nivel 1

Encabezado de nivel 2

Encabezado de nivel 3

Encabezado de nivel 4

Encabezado de nivel 5
Encabezado de nivel 6

🔼 Regresar

Enlaces

Código Markdown
[YouTube](https://youtube.com/jonmircha)
Contenido Markdown

YouTube

🔼 Regresar

Imágenes

Código Markdown
![This is JavaScript](https://jonmircha.com/img/blog/this-is-javascript.jpg)
Contenido Markdown

This is JavaScript

🔼 Regresar

Divisiones

En HTML se tiene la etiqueta <hr> para definir una división o ruptura semántica entre bloques de contenido. Se visualiza como una línea horizontal.

Código Markdown
Un bloque de contenido.

---

Otro bloque de contenido.
Contenido Markdown

Un bloque de contenido.

Otro bloque de contenido.

🔼 Regresar

Listas

Podemos utilizar listas ordenadas y desordenadas en Markdown.

Listas ordenadas

Código Markdown
1. Primavera
1. Verano
1. Otoño
1. Invierno
Contenido Markdown
  1. Primavera
  2. Verano
  3. Otoño
  4. Invierno

Listas desordenadas

Código Markdown
- Primavera
- Verano
- Otoño
- Invierno
Contenido Markdown
  • Primavera
  • Verano
  • Otoño
  • Invierno

Listas anidadas

Si quieres generar listas anidadas (sublistas), usa la indentación para controlar los niveles de los elementos de la lista.

Código Markdown
- Primavera
  - Abril
  - Mayo
  - Junio
- Verano
  - Julio
  - Agosto
  - Septiembre
- Otoño
  1. Octubre
  1. Noviembre
     - Día de Muertos
     - _Black Friday_
  1. Diciembre
- Invierno
  1. Enero
  1. Febrero
  1. Marzo
Contenido Markdown
  • Primavera
    • Abril
    • Mayo
    • Junio
  • Verano
    • Julio
    • Agosto
    • Septiembre
  • Otoño
    1. Octubre
    2. Noviembre
      • Dia de Muertos
      • Black Friday
    3. Diciembre
  • Invierno
    1. Enero
    2. Febrero
    3. Marzo

🔼 Regresar

Citas

Podemos dar formato de cita a un texto, anteponiendo a la línea de texto un carcater de mayor qué (>).

Podemos declarar citas en una sóla línea o en bloque.

Citas en línea

Código Markdown
> Todo lo que escuchamos es una opinión, no un hecho. Todo lo que vemos es una perspectiva, no la verdad. - Marco Aurelio.
Contenido Markdown

Todo lo que escuchamos es una opinión, no un hecho. Todo lo que vemos es una perspectiva, no la verdad. - Marco Aurelio.

Citas en bloque

Código Markdown
> Todo lo que escuchamos es una opinión, no un hecho. Todo lo que vemos es una perspectiva, no la verdad.
>
> Marco Aurelio.
Contenido Markdown

Todo lo que escuchamos es una opinión, no un hecho. Todo lo que vemos es una perspectiva, no la verdad.

Marco Aurelio.

🔼 Regresar

Tablas

Código Markdown
| Columna 1 | Columna 2 | Columna 3 |
| --------- | --------- | --------- |
| A         | B         | C         |
| D         | E         | F         |
| G         | H         | I         |
Contenido Markdown
Columna 1 Columna 2 Columna 3
A B C
D E F
G H I

🔼 Regresar

Códigos

Podemos dar formato de código a un texto, para ello se usa el acento grave (`).

Podemos declarar código en una sóla línea o en bloque.

Código en línea

Código Markdown
Esto es `código` en línea.

En _JavaScript_ una variable se define así: `let saludo = "Hola Mundo";`.
Contenido Markdown

Esto es código en línea.

En JavaScript una variable se define así: let saludo = "Hola Mundo";.

Código en bloque

Código Markdown
```js
function sumar(a, b) {
  if (typeof a !== "number" || typeof b !== "number") {
    console.error(`Los valores ingresados NO son números.`);
    return false;
  }

  let c = a + b;
  return c;
}
```
Contenido Markdown
function sumar(a, b) {
  if (typeof a !== "number" || typeof b !== "number") {
    console.error(`Los valores ingresados NO son números.`);
    return false;
  }

  let c = a + b;
  return c;
}

Código HTML

Markdown también interpreta código HTML dentro de su sintaxis.

Código Markdown
<form>
  <label for="q">Buscar:</label>
  <input type="search" name="q" id="q" required />
  <input type="submit" value="🔍" />
</form>
Contenido Markdown

🔼 Regresar

Comentarios

Los comentarios son textos ignorados por el programa que interpreta o compila el código, no se visualizarán. Sirven a los programadores para dejar notas en el código. Markdown utiliza el mismo formato que HTML para comentar.

Código Markdown
<!-- Esto es un comentario -->
Contenido Markdown

🔼 Regresar

Escape de caracteres

Se le llama escape de caracteres al proceso que hace un lenguaje de marcado o programación para omitir los caracteres especiales que usa para la definición de su sintaxis. Al escapar caracteres, el lenguaje los interpretará como simple texto plano.

Por ejemplo Markdown usa los siguientes caracteres especiales: guión bajo, medio, asterísco, corchetes cuadrados, paréntesis, almohadilla, acento grave, barra invertida, etc.

Para escapar un caracter en Markdown sólo tenemos que anteponerle un barra invertida \.

Código Markdown
Texto en \_cursiva\_ y \*\*negrita\*\*.
Contenido Markdown

Texto en _cursiva_ y **negrita**.

🔼 Regresar

Aprende más

Si quieres profundizar en este lenguaje de marcado, el sitio de Markdown Guide es una excelente opción que te servirá como guía de consulta rápida donde podrás encontrar: cheat sheets, actualizaciones de la sintaxis, herramientas, aplicaciones y servicios que usan Markdown.

Otra guía que te puede servir para hacer consultas rápidas mientras te aprendes la sintaxis es la del sitio de Joe Di Castro.

Si quieres practicar de forma inmediata la sintaxis del lenguaje puedes entrar al sitio de Dillinger que es un editor de código Markdown en línea.

En este curso te enseño a trabajar con Markdown.

Ver Curso

🔼 Regresar