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