¿Qué es el lenguaje markdown?🔗
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. La meta de Gruber era hacer que la gente "pudiera escribir usando un formato de texto plano fácil-de-leer y fácil-de-escribir". El markdwon es un lenguaje muy útil si publicas de manera constante en Internet.
Sintaxis Markdown🔗
A continuación veremos los conceptos básicos para escribir en markdown divididos por apartados.
PÁRRAFOS Y SALTOS DE LÍNEA🔗
Para generar un nuevo párrafo en Markdown simplemente debemos separar el texto mediante una línea en blanco (pulsando dos veces enter).
Para realizar un salto de línea y empezar una frase en la línea siguiente pero dentro del mismo párrafo, tendrás que pulsar dos veces la barra espaciadora y después pulsar enter. De esta manera haríamos un salto de línea equivalente a un cambio de párrafo pero sin interlineado doble.
Para realizar dejar más de una línea en blanco entre párrafos o, simplemente, siempre que queramos dejar espacios en blanco ya sea por estética o practicidad la fórmula sería:
Al poner esta fórmula en una línea, que significa non-breaking space, la convertiremos en una línea en blanco.
HEADERS o ENCABEZADOS🔗
Markdown soporta dos estilos de headers, Setext y atx.
Los headers de estilo Setext se obtienen mediante subrayado usando el símbolo igual para un header de primer nivel (H1) y guiones para un header de segundo nivel (H2). Por ejemplo:
Escrito en el editor Markdown:
Esto es un H1
=============
Esto es un H2
-------------
Esto es un H1🔗
Esto es un H2🔗
(Este sería el resultado)
Los headers de estilo Atx usan entre 1 y 6 almohadillas al principio de la línea, que corresponden al nivel de header. Por ejemplo:
Markdown:
# Esto es un H1
## Esto es un H2
### Esto es un H3
#### Esto es un H4
##### Esto es un H5
###### Esto es un H6
Esto es un H1🔗
Esto es un H2🔗
Esto es un H3🔗
Esto es un H4🔗
Esto es un H5🔗
Esto es un H6🔗
CITAS🔗
Para poder poner texto a modo de citas utilizaremos el símbolo mayor que > al comienzo de cada línea. Si estás familiarizado citando pasajes en emails no tendrás ningún problema citando en Markdown.
> Esto es una cita con dos párrafos. Esto es una cita con dos párrafos.
Esto es una cita con dos párrafos. Esto es una cita con dos párrafos.
Esto es una cita con dos párrafos. Esto es una cita con dos párrafos.
>
> Esto es una cita con dos párrafos.Esto es una cita con dos párrafos.
Esto es una cita con dos párrafos. Esto es una cita con dos párrafos.
Esto es una cita con dos párrafos. Esto es una cita con dos párrafos.
Esto es una cita con dos párrafos. Esto es una cita con dos párrafos. Esto es una cita con dos párrafos. Esto es una cita con dos párrafos. Esto es una cita con dos párrafos. Esto es una cita con dos párrafos.
Esto es una cita con dos párrafos.Esto es una cita con dos párrafos. Esto es una cita con dos párrafos. Esto es una cita con dos párrafos. Esto es una cita con dos párrafos. Esto es una cita con dos párrafos.
Puedes introducir también citas dentro de una cita:
> Esta es la cita de primer nivel.
>
> > Esta es la cita dentro de la cita de primer nivel.
>
> Y volvemos a la cita de primer nivel.
Esta es la cita de primer nivel.
Esta es la cita dentro de la cita de primer nivel.
Y volvemos a la cita de primer nivel.
Las citas también pueden contener otros elementos de Markdown como headers, listas, etc.:
> ### Esto es un header.
>
> 1. Este es el primer elemento de una lista.
> 2. Este es el segundo elemento de una lista.
Esto es un header.🔗
- Este es el primer elemento de una lista.
- Este es el segundo elemento de una lista.
LISTAS🔗
Markdown soporta tanto listas ordenadas (numeradas) como desordenadas.
Las listas desordenadas pueden obtenerse mediante asteriscos, símbolos + o guiones y siempre separando la primera palabra con un espacio:
* Coche
* Moto
* Avión
+ Coche
+ Moto
+ Avión
- Coche
- Moto
- Avión
- Coche
- Moto
- Avión
- Coche
- Moto
- Avión
- Coche
- Moto
- Avión
Las listas ordenadas se obtienen con números:
1. Coche
2. Moto
3. Avión
- Coche
- Moto
- Avión
Los elementos de una lista pueden constar de varios párrafos. Cada párrafo subsiguiente en un elemento de la lista debe estar sangrado por 4 espacios o 1 tab:
1. Esto es una lista con dos párrafos. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
Esto es una lista con dos párrafos. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
Suspendisse id sem consectetuer libero luctus adipiscing.
Para insertar una cita dentro de una lista, debemos añadir el símbolo > de la misma manera, con sangrado:
-
Una lista con una cita:
Esto es una cita dentro de una lista
De la misma manera ocurre si queremos insertar una lista dentro de una lista. Deberemos poner 4 espacios o 1 tab:
- Esto es una lista
- Esto es una lista dentro de una lista
- Esto es una lista dentro de una lista
- Esto es una lista dentro de una lista dentro de otra lista
- Esto es una lista
- Esto es una lista dentro de una lista
- Esto es una lista dentro de una lista
- Esto es una lista dentro de una lista dentro de otra lista
CÓDIGOS DE BLOQUE🔗
Si quieres crear un bloque entero que contenga código lo único que tendremos que hacer es encerrar dicho párrafo entre dos líneas formadas por tres ~ virgulillas.
Aquí podríamos escribir
todas las líneas que queramos.
Las reglas de Markdown no se aplican dentro de este cuadro
En caso de que sólo queramos formar una línea, sólo tendremos que poner sangrado con 4 espacios o 1 tab.
REGLAS HORIZONTALES🔗
Se pueden introducir reglas horizontales usando 3 o más asteriscos, guiones o guiones bajos. Se pueden, o no, separar con espacios.
* * *
***
*****
- - -
------
_ _ _
ÉNFASIS🔗
El lenguaje Markdown utiliza asteriscos y otros símbolos para enfatizar (negritas, cursivas, subrayados y tachados):
| Markdown | Resultado |
|---|---|
| *Cursiva* | Cursiva |
| _Cursiva_ | Cursiva |
| *Negrita* | Negrita |
| _Negrita_ | Negrita |
| ***Cursiva y negrita*** | Cursiva y negrita |
| _Cursiva y negrita_ | Cursiva y negrita |
| ++Subrayado++ | Subrayado |
| ~~Tachado~~ |
LINKS o ENLACES🔗
Los enlaces se pueden realizar de dos maneras.
- Poniendo una URL directamente: https://www.nitoku.com/
- Enlazando una palabra o frase: Nitoku
Si elegimos la segunda opción la fórmula de hacerlo en Markdown es muy sencilla y se hace poniendo el texto que queramos enlazar entre corchetes [Texto] y el enlace, seguido, dentro de un paréntesis y sin espacios entre ellos.
[Texto enlazado](Enlace URL al que dirige el texto)
=
[Nitoku en español](https://www.nitoku.com/@nitoku_es)
De esta manera nos quedaría así:
| Markdown | Resultado |
|---|---|
| [Nitoku](https://www.nitoku.com/) | Nitoku |
Además podremos utilizar cualquier otra regla de Markdown para resaltar nuestro enlace como las negritas, cursivas o incluso headers:
++[Nitoku en español](https://www.nitoku.com/@nitoku_es)++
**[Nitoku en español](https://www.nitoku.com/@nitoku_es)**
*[Nitoku en español](https://www.nitoku.com/@nitoku_es)*
### [Nitoku en español](https://www.nitoku.com/@nitoku_es)
- [Nitoku en español](https://www.nitoku.com/@nitoku_es)
~~[Nitoku en español](https://www.nitoku.com/@nitoku_es)~~
Nitoku en español🔗
IMÁGENES, ICONOS, GIFS🔗
Insertar una imagen con Markdown se realiza de una manera prácticamente idéntica a insertar links, en cierta manera porque las imágenes en Markdown siempre se introducen con su enlace y no como archivo.
De esta manera seguiremos la misma fórmula de [] + () pero con ! delante del todo.
Así quedaría una imagen:
Nos vale cualquier tipo de imagen que haya en la web y en un sitio seguro.
De este modo también podemos añadir iconos:
O gifs:
| Markdown | Resultado |
|---|---|
|  | |
|  |  |
|  | |
Además, en Nitoku hemos hecho un tutorial sobre imágenes con algún detalle más por si se quiere algo más de información al respecto: ¿Cómo añadir imágenes a nuestras páginas de Nitoku?
BARRAS INVERTIDAS - OMITIR LENGUAJE MARKDOWN🔗
Algunas veces buscaremos poner una almohadilla, asterisco, corchete, etc. y que no nos lo convierta en nada. El lenguaje Markdown tiene prevista una solución para esto y es poner una barra invertida ( \ ) antes de cada uno de los siguientes símbolos (sin espacios) para anular sus efectos:
\ barra invertida
` comilla invertida
* asterisco
_ guión bajo
{} llaves
[] corchetes
() paréntesis
# hashtag o almohadilla
+ símbolo más
- guión o símbolo menos
. punto
! signo de exclamación
Puede pasar que tengamos dos símbolos que queramos anular y que estén seguidos como en el caso de la fórmula de una imagen: . En este caso, al haber dos símbolos juntos deberemos introducir una barra invertida delante de la exclamación (para anular la exclamación) y una barra invertida después de la exclamación y delante del corchete (para anular el corchete).
\!\[Text](https://img.icons8.com/ios/68/52977b/markdown-filled.png)
TABLAS🔗
La forma de meter las tablas con lenguaje Markdown es con la barra vertical ( | ) de la siguiente manera:
| Markdown | en | Nitoku |
| :---: | :---: | :---: |
| Barra | Punto | Guión |
Como vemos cada fila separa las celdas con la barra vertical.
Además las tablas tienen dos peculiaridades. La primera es que la primera fila es el encabezado y se marcará de otro color como vemos en el siguiente ejemplo:
| Markdown | en | Nitoku |
|---|---|---|
| Barra | Punto | Guión |
La segunda peculiaridad es que en la segunda fila se remarca cómo queremos alinear el texto en toda la columna, si queremos que el texto de esa columna esté alineado a la derecha (---:), a la izquierda (:---) o al centro (:---:). Así:
| Markdown | en | Nitoku |
| :--- | :---: | ---: |
| Barra | Punto | Guión |
| Encabezado | Asterisco | Almohadilla |
| Markdown | en | Nitoku |
|---|---|---|
| Barra | Punto | Guión |
| Encabezado | Asterisco | Almohadilla |
Además, como hemos visto en otras tablas de este mismo documento, las tablas soportan toda la sintaxis de Markdown por lo que dentro de una tabla podemos usar negritas, cursivas, enlaces e incluso meter imágenes.
| Markdown | Resultado |
|---|---|
| ICONO / IMAGEN | |
| GIF | |
| ENLACE | Nitoku |