Cuando vosotros (los humanos) necesitais formatear un texto de forma rápida y sencilla, y además teneis que hacerlo en texto plano, la mayoría intentará hacerlo con HTML (si va a ser interpretado por un navegador web) o incluso con BBCode (si se trata de un post en un foro)... y ambas opciones no estan mal, pero existe otra opción especialmente diseñada para ese fin, que muy pocos conocen y aún menos utilizan: el lenguaje de marcado web Markdown.
La Wikipedia lo describe de ésta forma:
Markdown es un lenguaje de marcado ligero creado por John Gruber que 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. Se distribuye bajo licencia BSD y está disponible en diferentes sistemas de gestión de contenidos (CMS).
Es decir, con Markdown podemos dar formato a un texto plano de forma rápida e intuitiva, de forma que al ser procesado por el correspondiente intérprete de Markdown, nuestro texto se convierta en texto XHTML con sus negritas, cursivas, títulos, etc.
Nuestro querido Octopress (el software sobre el que está escrito éste blog) utiliza éste lenguaje de marcado para formatear los textos, lo que significa que éste mismo artículo que estais leyendo ahora mismo (con sus cabeceras, negritas, etc) ha sido escrito utilizando Markdown).
Éstas son las opciones que tenemos con Markdown:
- Texto en negrita, cursiva y tachado
- Párrafos y saltos de linea
- Códigos
- Títulos y cabeceras
- Listas
- Citas
- Enlaces
- Imágenes
- Separadores
- Tablas
- Notas a pié de página
Vamos a empezar entonces, pero antes de seguir teneis que tener en cuenta que algunos de los ejemplos que os voy a enseñar en este artículo podrían verse de forma diferente en otra parte, ya que dependiendo de los estilos CSS que tengais en vuestra web, la presentación puede variar.
Texto en negrita, cursiva y tachado
La forma de utilizarlo es muy simple: únicamente hay que colocar el texto que queremos formatear entre sus correspondientes tags de marcado (como si fuera HTML). Por ejemplo, si ponemos una frase entre asteriscos o entre guiones bajos, significa que queremos que dicha frase aparezca en letra cursiva.
Por tanto, con éste texto:
*Texto en cursiva* y _Texto en cursiva_
Obtendremos éste resultado:
Texto en cursiva y Texto en cursiva
Del mismo modo, si encerramos el texto entre dobles asteriscos o dobles guiones bajos, significa que queremos que el texto se muestre en negrita.
Por tanto, éste texto:
**Texto en negrita** y __Texto en negrita__
Obtendremos éste otro resultado:
Texto en negrita y Texto en negrita
Facil, no? Pues ahora vamos a ver todas las opciones de las que disponemos con éste lenguaje, o al menos, todas las opciones que permite la implementación de Markdown que hay en nuestro Octopress (que no son pocas). Desconozco si hay alguna que no esté en Octopress, o si alguna de las que tiene no son oficiales, pero en éste artículo intentaré explicar el mayor número posible de ellas:
El texto tachado se consigue encerrando el texto entre dobles virgulillas ~(tambien llamadas tildes de eñe), de forma que:
~~texto que aparecerá tachado~~
nos mostrará:
~~texto que aparecerá tachado~~
Párrafos y saltos de linea
Los párrafos se crean automáticamente cuando dejamos una linea en blanco entre medias de dos bloques de texto. Por ejemplo, este código:
Texto del párrafo 1.
Texto del párrafo 2.
Nos dará automáticamente la separación entre ambos bloques:
Texto del párrafo 1.
Texto del párrafo 2.
Sin embargo, si únicamente queremos hacer un salto de linea, basta con acabar la linea con 2 espacios en blanco (sustituye el carácter _ por espacios en blanco):
Linea 1__
Linea 2
Lo cual mostrará ésto:
Linea 1 Linea 2
Códigos
Si lo que queremos mostrar es un código, el nombre de un archivo, un comando sencillo o algo similar, lo metemos entre acentos inversos:
`codigo`
Y obtendremos: codigo
Si el código que queremos poner ocupa varias lineas, se pone entre 3 acentos inversos:
```
Ejemplo de un trozo de
codigo en varias lineas
```
Con lo que obtendremos:
Ejemplo de un trozo de
codigo en varias lineas
Títulos y cabeceras
Para los títulos se utiliza el carácter #, pudiendo poner de 1 a 6 dependiendo del tamaño de título que queramos. Por ejemplo, éstos códigos:
######Titulo 6
#####Titulo 5
####Titulo 4
###Titulo 3
##Titulo 2
#Titulo 1
Darían como resultado:
Titulo 6
Titulo 5
Titulo 4
Titulo 3
Titulo 2
Titulo 1
Listas
Para las listas, podemos poner cada elemento a continuación de un asterisco o un guión al principio de cada linea. Si ponemos:
* Elemento 1
* Elemento 2
* Etc...
Obtendremos:
- Elemento 1
- Elemento 2
- Etc...
Y para listas de segundo nivel, basta con dejar un par de espacios en blanco delante. Por ejemplo, si ponemos:
* Elemento 1
* Elemento 2
* Sub-elemento 2.1
* Sub-elemento 2.2
* Sub-elemento 2.3
* Sub-elemento 2.4
* Sub-elemento 2.4.1
* Etc...
Obtendremos:
- Elemento 1
- Elemento 2
- Sub-elemento 2.1
- Sub-elemento 2.2
- Sub-elemento 2.3
- Sub-elemento 2.4
- Sub-elemento 2.4.1
- Etc...
También se pueden hacer listas ordenadas (comenzando por numeros) e incluso mezclarlas:
1. Elemento 1
2. Elemento 2
3. Elemento 3
4. Elemento 4
- Sub-elemento 4.1
- Sub-elemento 4.2
1. Sub-elemento 4.2.1
2. Sub-elemento 4.2.2
5. Elemento 5
Lo que nos mostraría:
- Elemento 1
- Elemento 2
- Elemento 3
- Elemento 4
- Sub-elemento 4.1
- Sub-elemento 4.2
- Sub-elemento 4.2.1
- Sub-elemento 4.2.2
- Elemento 5
Citas
Para escribir citas, se pone el texto que queremos citar a continuación del carácter >, por ejemplo, el código:
> No temo a los ordenadores; lo que temo es quedarme sin ellos - Isaac Asimov
Daría como resultado:
No temo a los ordenadores; lo que temo es quedarme sin ellos - Isaac Asimov
Y para citas anidadas (citas dentro de otras citas) se van poniendo más carácteres > (hasta el nivel que queramos: 2, 3, 4, ...). Por ejemplo:
> Cita primera
>> Cita segunda
>>> Cita tercera
Generaría:
Cita primera
Cita segunda
Cita tercera
Enlaces
Para hacer enlaces, debemos poner la dirección a la que queremos que apunte entre paréntesis, precedida del texto del enlace entre corchetes, tal y como se ve aqui:
[Texto del enlace](https://pornohardware.com)
Y eso nos mostraría ésto: Texto del enlace
Imágenes
Para añadir imágenes se puede usar éste código:
Que daría como resultado ésto:
Separadores
Para mostrar un separador en el texto, podemos utilizar tres guiones:
---
Que mostrará algo como ésto:
Tablas
Hay algunas opciones más avanzadas, como por ejemplo la creación de tablas simples utilizando las barras verticales (pipes) de ésta forma:
Color | Número | Ciudad
:--- | :---: | ---:
Azul | Uno | Toledo
Rojo | Dos | Madrid
Negro | Tres | Asturias
Lo cual generaría ésta tabla:
| Color | Número | Ciudad |
|---|---|---|
| Azul | Uno | Toledo |
| Rojo | Dos | Madrid |
| Negro | Tres | Asturias |
El lado en el que pongamos los 2 puntos : indica hacia donde estará alineado el contenido de cada celda:
- Centrado:
:--: - Alineado a la izquierda:
:--- - Alineado a la derecha:
---:
Notas a pié de página
Por último, se pueden poner notas a pié de página intercaladas en el texto, de forma que la explicación de cada anotación se situa en la parte de abajo del documento, por ejemplo así:
Esto es una nota a pié de página[^nota1] mezclada[^nota2] con el texto[^nota3].
[^nota1]: Descripción de la nota 1
[^nota2]: Descripción de la nota 2
[^nota3]: Descripción de la nota 3
Lo cual generaría algo como:
Esto es una nota a pié de página1 mezclada2 con el texto3 (Y como podrás ver al final de esta página, se ha añadido la "explicacion" a la nota que acabamos de poner).
Es importante resaltar que puesto que Markdown se usa para generar XHTML, hay 2 carácteres que hay ue tratar de forma especial cuando trabajemos con éste lenguaje de marcado. Éstos carácteres son < y &.
El primero de ellos se utiliza para comenzar los tags HTML, y el último para especificar entidades HTML, por lo que a la hora de mostrar dichos carácteres con Markdown debemos escaparlos utilizando < en lugar de < y & en lugar de &.
Y eso es todo por ahora! Prometo ir añadiendo todas las nuevas opciones de marcado que vaya descubriendo.
Y recordar, si el artículo os ha parecido útil, comentarlo, agradecerlo y/o compartirlo... que para eso está! xDD
Alaaaaaaaaaaaaaaaa
