Hoy os quiero hablar de Markdown, un lenguaje de marcado que nos permite formatear nuestros textos de manera rápida y simple, generando una salida similar al HTML.
Para que lo veáis mejor, os pongo unos ejemplos de HTML vs. Markdown
- Encabezado 1
- HTML: <h1>Título</h1>
- Markdown: # Título
- Encabezado 2
- HTML: <h2>Subtítulo</h2>
- Markdown: ## Subtítulo
- Cursiva
- HTML: <i>Texto</i>
- Markdown: *Texto*
- Negrita
- HTML: <b>Texto</b>
- Markdown: **Texto**
- Enlace
- HTML: <a href="https://www.tecnificados.com">enlace</a>
- Markdown: enlace(https://www.tecnificados.com)
En la web existen muchos editores que traducen Markdown a HTML ya procesado. Por ejemplo: https://stackedit.io o https://dillinger.io
Pero a mí lo que me gusta es que este formato es soportado en los repositorios de código más importantes como Github, Bitbucket,...
Por eso en la mayoría de los proyectos de estos repositorios, siempre hay un "readme.md" que contiene la documentación inicial.
Cursiva
Texto entre un asterisco * o un guión bajo _ . Ejemplo:
*Texto en cursiva*
Negrita
Texto entre dos asteriscos ** o dos guiones bajos __ . Ejemplo:
**Texto en negrita**
Saltos de línea:
Para generar un párrafo deja una linea en blanco (pulsa "enter" dos veces)
Para generar un salto de linea dentro del mismo párrafo deja dos espacios en blanco al final de la linea
Encabezados:
Con almohadilla(#), se concatenan tantos como niveles necesites. Ejemplo:
# Encabezado H1
## Encabezado H2
### Encabezado H3
#### Encabezado H4
##### Encabezado H5
###### Encabezado H6
Listas
Para crear simples listados se utilizan *, - o +. Utiliza el que más te guste, o combínalos. Ejemplo:
- Ironman
- Hulk
+ Viuda Negra
* Capitana Marvel
* Dr. Strange
+ Spiderman
Listas anidadas
Para crear listas anidadas utiliza cuatro espacios:
- Fase 1
- Iron Man (2008)
- The Incredible Hulk (2008)
- Iron Man 2 (2010)
- Thor (2011)
- Capitán América: el primer vengador (2011)
- The Avengers (2012)
- Fase 2
- Iron Man 3 (2013)
- Thor: The Dark World (2013)
- Captain America: The Winter Soldier (2014)
- Guardianes de la Galaxia (2014)
- Avengers: Age of Ultron (2015)
- Ant-Man (2015)
- Fase 3
- Capitán América: Civil War (2016)
- Doctor Strange (2016)
- Guardianes de la Galaxia Vol. 2 (2017)
- Spider-Man: Homecoming (2017)
- Thor: Ragnarok (2017)
- Black Panther (2018)
- Avengers: Infinity War (2018)
- Ant-Man and the Wasp (2018)
- Capitana Marvel (2019)
- Avengers: Endgame (2019)
- Spider-Man: Lejos de casa (2019)
Listas ordenadas
Tenemos que escribir el número seguido de un punto. También se pueden anidar con los cuatro espacios.
1. Fase 1
1. Iron Man (2008)
2. The Incredible Hulk (2008)
3. Iron Man 2 (2010)
4. Thor (2011)
5. Capitán América: el primer vengador (2011)
6. The Avengers (2012)
2. Fase 2
1. Iron Man 3 (2013)
2. Thor: The Dark World (2013)
3. Captain America: The Winter Soldier (2014)
4. Guardianes de la Galaxia (2014)
5. Avengers: Age of Ultron (2015)
6. Ant-Man (2015)
3. Fase 3
1. Capitán América: Civil War (2016)
2. Doctor Strange (2016)
3. Guardianes de la Galaxia Vol. 2 (2017)
4. Spider-Man: Homecoming (2017)
5. Thor: Ragnarok (2017)
6. Black Panther (2018)
7. Avengers: Infinity War (2018)
8. Ant-Man and the Wasp (2018)
9. Capitana Marvel (2019)
10. Avengers: Endgame (2019)
11. Spider-Man: Lejos de casa (2019)
Linea horizontal
Escribiendo *** o --- o ___
Enlaces en línea
Se escriben enmarcando el texto a enlazar entre corchetes [] y el link a seguir entre paréntesis. Ejemplo:
Pulsa [aquí](https://www.tecnificados.com) para ir a mi blog.
Enlaces automáticos
Se escriben introduciendo una URL entre los símbolos <>. Ejemplo:
<https://www.tecnificados.com>
Código
Si necesitas añadir código (html, sql, ...) lo puedes hacer con el acento `
El texto debe estar entre dos acentos. Ejemplo:
`Select name, year from films where year > 1980`
También lo puedes utilizar con varias líneas, pero en este caso deben ser tres acentos ```. Ejemplo:
```
Select name, year
from films
where year > 1980
```
Imágenes
Insertar una imagen se parece mucho a insertar un enlace. Sólo hay que poner una exclamación ! al principio, y así se visualizará la imagen. Ejemplo:
El texto entre corchetes es el texto que se visualizará si la imagen no se carga.
Si además quieres añadir texto alternativo lo puedes hacer añadiendo al final el texto entre comillas. Ejemplo:
Tablas
Las tablas en Markdown son muchísimo más fáciles de escribir que en HTML.
Sólo tenemos que decir cuáles son los elementos de la cabecera, separar los campos con la barra horizontal y separar cada columna con la barra vertical | Ejemplo:
Nombre| Películas
-- | --
Fase I | 6
Fase II | 6
Fase III | 11
Podemos alinear las columnas utilizando dos puntos : junto a las líneas horizontales de la línea de separación. Con dos puntos a la izquierda de la línea, la columna estará alineada a la izquierda. Si los ponemos a la derecha de la línea, se alinearán a la derecha. Si los ponemos a ambos lados, su alineación será centrada. Lo mejor es verlo con un ejemplo:
Saga|Nombre | Películas
:-- |:--: | --:
Gemas del Infinito | Fase I | 6
Gemas del Infinito | Fase II | 6
Gemas del Infinito | Fase III | 11
Caracteres que Markdown interpreta
A veces necesitamos utilizar caracteres como * o -
Para eso está la barra invertida \
Si la utilizamos justo antes del carácter que no interese, no será interpretada. Ejemplo:
Esto es un asterisco \*
Y con esto acabamos la guía rápida de Markdown.
He creado un repositorio en Github (https://github.com/tecnificados/markdown), donde están todos los ejemplos de la guía rápida. Se encuentran en el fichero "readme.md", que por defecto interpreta. Si queréis acceder al modo texto, para ver la sintaxis de Markdown, hacerlo a través de este enlace:
https://raw.githubusercontent.com/tecnificados/markdown/master/README.md
Espero que os sea de utilidad.