Introducción a Markdown

Cuándo deseamos generar contenido en HTML para la web, por ejemplo para crear una entrada en un blog, tenemos en principio tres opciones:

  1. Escribir nosotros mismos el código HTML.
  2. Utilizar un editor de textos WYSIWIG
  3. Utilizar un lenguaje de marcado ligero

La primera opción nos proporciona la ventaja de tener todo el control sobre el código producido, pero tiene el inconveniente de ser bastante tedioso y complicado. A parte, cuando escribimos HTML un mínimo fallo puede causar un resultado desastroso (Por ejemplo si cometemos una errata del estilo describir <\a> en lugar de </a>)

La segunda opción, es más fácil e intuitiva, pero tiene un problema: Los editores WYSIWIG como TinyMCE suelen generar HTML de mala calidad, y solo son adecuados para gente sin conocimientos de HTML.

La tercera opción, tiene un poco las ventajas de las dos primeras opciones, sin apenas ninguno de sus inconvenientes, y es la que analizaremos en esta entrada, utilizando en concreto el lenguaje de marcado ligero Markdown

Ventajas de Markdown

En mi opinión escribir en Markdown tiene las siguientes ventajas:

  • Es sencillo de aprender
  • Es bastante más legible y fácil de mantener que HTML
  • Aunque, por norma general, se utiliza para generar HTML, se puede también exportar a otros formatos como PDF.
  • Permite incrustar HTML. Por lo tanto, en principio, todo lo que se pueda hacer en HTML se puede hacer también en Markdown
  • Esta bastante usado y aceptado por la comunidad. Por ejemplo, la mayor parte de los proyectos de github contienen un fichero readme que suele estar en formato Markdown.
  • Permite que te concentres en generar contenido en lugar de preocuparte de generar HTML correcto o tener que lidiar con la idiosincrasia de un determinado editor WYSYWIG.

Sintáxis

Detallaré algunos ejemplos de las cosas que podemos hacer con Markdown. Si queréis podéis probar de forma interactiva los ejemplos en https://dillinger.io

Cursiva

Para poner un texto en cursiva basta con empezar y terminar el texto con un _.

Ejemplo:

1
Esta _palabra_ está en cursiva

Resultado:

Esta palabra está en cursiva

Negrita

Similar a la cursiva pero usando dos barras bajas (__) en lugar de una:

Ejemplo:

1
Esta __palabra__ está en negrita

Resultado:

Esta palabra está en negrita

Hipervínculo

Para crear un hipervínculo en Markdown basta con poner entre corchetes ([ y ]) el texto del enlace seguido de la url entre
paréntesis:

Ejemplo:

1
Este [enlace](https://es.wikipedia.org) te llevará a la Wikipedia

Resultado:

Este enlace te llevará a la Wikipedia

Imagenes

Muy similar a los hipervínculos pero poniendo un ! antes del corchete.

Ejemplo:

1
![logo de markdown](https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg)

Resultado:

logo de markdown

En este caso, el texto entre cochetes, será el texto que aparecería en caso de que la imágen no cargase

Listas numeradas

Bastará con poner los números seguidos de un punto y un espacio al comienzo de cada elemento de la lista:

Ejemplo:

1
2
3
4
Mi lista de frutas:
1. Manzana
2. Pera 
3. Kiwi

Resultado:

Mi lista de frutas:

  1. Manzana
  2. Pera
  3. Kiwi

Listas no numeradas

De igual forma puedes hacer lista no númeradas utilizando el caracter - seguido de un espacio al comienzo de cada elemento.

Ejemplo:

1
2
3
4
Mi lista de legumbres:
- Alubias
- Lentejas
- Garbanzos

Resultado:

Mi lista de legumbres:

  • Alubias
  • Lentejas
  • Garbanzos

Utilizar * o + en lugar de -, producirá el mismo resultado

Títulos

Bastará con empezar la línea con una o varias almohadillas seguidas de un un espacio

Ejemplo:

1
2
# Tema principal
## Tema secundario

Resultado:

Tema principal

Tema secundario

Una forma equivalente de producir el resultado del ejemplo anterior sería:

1
2
3
4
Tema principal
==============
Tema secundario
---------------

Código en línea

Podemos utilizar este recurso para resaltar nombres de ficheros, urls, nombres de variables, y cosas de ese estilo. Basta con rodear el texto desado con el caracter `

Ejemplo:

1
En JavaScript `Math.random()` genera un número aleatorio

Resultado:

En JavaScript Math.random() genera un número aleatorio

Bloque de código

Si lo que necesitamos es mostrar un fragmento de código, solo tendremos que poner ``` antes y después del mismo

Ejemplo:

1
2
3
4
5
6
```
// devuelve la letra correspondiente a un número DNI
function letraDni(dni) {
return "TRWAGMYFPDXBNJZSQVHLCKE".charAt(dni % 23);
}
```

Resultado:

1
2
3
4
// devuelve la letra correspondiente a un número DNI
function letraDni(dni) {
  return "TRWAGMYFPDXBNJZSQVHLCKE".charAt(dni % 23);
}

También podemos utilizar los bloque de código cuando necesitemos texto de anchura fija. Por ejemplo para ASCII Art

Si necesitáis mas información podéis consultar la página oficial de Markdown. También hay algún resumen en github

Espero que os haya sido de interés. No dudéis en comentar