Markdown. Qué es y cómo formatear textos.

Tabla de contenidos

¿Qué es MarkDown?
Titulos o Encabezados en Markdown
Texto en Negrita, Cursiva y Tachado
Creación de Párrafos
Líneas Separadoras
Resaltar Texto Importante
Citas
Imágenes
Enlaces Web
Imágenes como Enlaces
Listas Desordenadas o no numeradas
Listas Ordenadas o numeradas
Listas de Enlaces Web
Inclusión de Código
Caracteres de Escape
Tablas
Notas al Pie
Video explicativo sobre Formatear Texto con MarkDown

¿Qué es MarkDown?

Markdown es un lenguaje de marcas o etiquetas ligero porque fue creado para dar formato a textos planos utilizando el mínimo de marcas o etiquetas posibles, permitiendo que sean fácilmente interpretados tanto para su lectura como para su escritura gracias a su simplicidad.

Este lenguaje es tan conocido que podemos encontrar múltiples proyectos destinados a interpretar y trabajar con textos formateados con él, incluyendo plugins, editores de código Markdown e incluso proyectos web compatibles con este formato.

A pesar de su popularidad, Markdown no es un lenguaje estandarizado, lo que provoca la aparición de variantes con sintaxis ligeramente diferentes, pero manteniendo una estructura en común.

Markdown puede utilizarse sin necesidad de guardar el código en un archivo, pero si se desea almacenar un texto formateado, se puede hacer en cualquier tipo de archivo de texto plano. Sin embargo, se ha popularizado el uso de la extensión «.md» para este propósito, aunque esta extensión también se utiliza para otros tipos de textos planos.

Titulos o Encabezados en Markdown

Para convertir un texto en un título o encabezado, Markdown permite usar hasta seis niveles mediante el uso del carácter almohadilla (#). La cantidad de almohadillas indica el nivel del encabezado disminuyendo el tamaño del texto a medida que aumenta el nivel del encabezado, siendo el nivel uno el título que tiene un mayor tamaño y el nivel seis el que tiene un menor tamaño.

Código MarkDown

# Encabezado Nivel 1

## Encabezado Nivel 2

### Encabezado Nivel 3

#### Encabezado Nivel 4

##### Encabezado Nivel 5

###### Encabezado Nivel 6

Resultado


Encabezado Nivel 1
Encabezado Nivel 2
Encabezado Nivel 3
Encabezado Nivel 4
Encabezado Nivel 5
Encabezado Nivel 6

Texto en Negrita, Cursiva y Tachado

Para mostrar un texto en negrita, se deben colocar dos asteriscos o dos guiones bajos delante y detrás del texto.

Código MarkDown

Texto en **negrita**
Texto en _ _negrita_ _

Resultado

Texto en negrita
Texto en negrita

Para mostrar un texto en cursiva, se coloca un asterisco o un guion bajo delante y detrás del texto.

Código MarkDown

Texto en *cursiva*
Texto en _cursiva_

Resultado

Texto en cursiva
Texto en cursiva

Para texto en negrita y cursiva, se pueden combinar las marcas de negrita dentro de las de cursiva o viceversa.

Código MarkDown

Texto en *_ _cursiva-negrita_ _*
Texto en **_negrita-cursiva_**

Resultado

Texto en cursiva-negrita
Texto en negrita-cursiva

Para texto tachado, se utilizan dos caracteres virgulilla delante y detrás del texto.

Código MarkDown

Texto ~~Tachado~~

Resultado

Texto Tachado

Creación de Párrafos

Para crear una nueva línea de texto, se hace mediante un salto de línea.

Para separar lineas de texto o párrafos, se debe dejar una línea en blancode separación, si se colocan múltiples líneas en blanco Markdown las interpretara como una única línea de separación.

Líneas Separadoras

Para crear una línea separadora, se debe colocar tres caracteres asteriscos o tres caracteres virgulilla en una línea vacía.

Código MarkDown

***
Texto
~~~

Resultado

  
  Texto
  

Resaltar Texto Importante

Para resaltar texto importante, se utilizan tres virgulillas en líneas vacías antes y después del texto.

Código MarkDown

~~~
Texto Importante
~~~

Resultado

Texto Importante
  

Citas

Para indicar queun texto es la cita de otro texto , se debe colocar el signo mayor que (>) al inicio del párrafo.

Código MarkDown

> Texto Citado

Resultado

Texto Citado

Imágenes

Para añadir una imagen, se utiliza un signo de exclamación seguido de corchetes, dentro de estos corchetes se colocará el texto alternativo de la imagen, a continuación se colocará entre paréntesis se colocará la url o ubicación de la imagen.

Código MarkDown

![Texto alternativo](url_o_ubicación_de_la_imagen)

Enlaces Web

Para añadir un enlace web, se debe colocar el texto que actuara como enlace entre corchetes y la URL en paréntesis.

Código MarkDown

[Texto del enlace](https://ejemplo.com)

Para que la URL delenlace , tambien sea el texto del enlace, se debe colocar la url entre los signos mayor que y menor que.

Código MarkDown

<https://ejemplo.com>

Imágenes como Enlaces

Para usar una imagen como enlace, se debe combinar la sintaxis de imágenes y enlaces de esta forma:

[ ![Texto alternativo](url_o_ubicación_de_la_imagen) ](https://ejemplo.com)

Listas Desordenadas o no numeradas

Para crear listas desordenadas, se debe colocar un caracter guion, un caracter asterisco o un signo de suma junto con un espacio en blanco al inicio de cada elemento de la lista.

Código MarkDown

- Elemento1
- Elemento2

Resultado

Elemento1
Elemento2

Dentro de un elemento de una lista se pueden añadir otras listas creando asi diferentes subniveles de elementos utilizando las tabulaciones.

Código MarkDown

- Elemento1
   - ElementoA
   - ElementoB
- Elemento2

Resultado

Elemento1
ElementoA
ElementoB
Elemento2

Listas Ordenadas o numeradas

Para listas ordenadas, se deben colocar números secuenciales seguidos de un punto y un espacio en blanco.

Código MarkDown

1. Elemento1
2. Elemento2

Resultado

Elemento1
Elemento2

Dentro de un elemento de una lista se pueden añadir otras listas creando asi diferentes subniveles de elementos utilizando las tabulaciones.

Código MarkDown

1. Elemento1
   1. ElementoA
   2. ElementoB
2. Elemento2

Resultado

Elemento1
ElementoA
ElementoB
Elemento2

Listas de Enlaces Web

Las listas de enlaces web son un tipo de lista desordenada especial que podemos crear en algunas plataformas, para crear listas de enlaces web, dando un determinado estilo y mostrando cierta información de cada enlace.

Para crear este tipo de listas, cada enlace web se colocará en una línea diferente, y al inicio de la línea colocaremos un carácter guión, un asterisco o un carácter suma. Luego, entre corchetes, se deberá colocar el título que le queramos indicar a cada enlace; luego, entre paréntesis, deberemos colocar la dirección web del enlace y, por último, de forma opcional, podemos indicar una pequeña descripción o texto sobre el enlace.

Código MarkDown

- [Web1](http://direccionwebejemplo.noes) Esta es mi primera Web
* [Web2](http://testweb.noes) Esta es una web test
+ [Web3](http://inventadaweb.noes) Esta Web no existe

Resultado

Web1 Esta es mi primera Web  
Web2 Esta es una web test
 Web3 Esta Web no existe

Inclusión de Código

Para añadir código de programación en un texto y que este código se muestre con un formato diferente al resto del texto, una manera de hacerlo es colocar un acento grave delante y detrás del código que vayamos a colocar.

Código MarkDown

Ejecutando `printf()` mostramos texto en la consola

Resultado

Ejecutando printf() mostramos texto en la consola

Pero si además queremos indicar a qué lenguaje de programación corresponde el código, deberemos colocar en una línea tres acentos graves junto con el nombre del lenguaje de programación. Luego haremos un salto de línea, colocaremos el código, y por último, en una nueva línea, colocaremos otros tres acentos graves.

Código MarkDown

Condicional en javascript
```javascript
if( variable>10 ){
   document.write("Número muy alto")
} else {
   document.write("Número muy bajo")
}
```

Resultado

Condicional en javascript
if( variable>10 ){
   document.write("Número muy alto")
} else {
   document.write("Número muy bajo")
}

Caracteres de Escape

Para mostrar como texto caracteres que utiliza Markdown para dar formato, se puede utilizar caracteres de escape.

Código MarkDown

Para crear textos en *negrita*, debemos colocar un asterisco delante y otro detras de esta forma:
\*Texto\*

Resultado

Para crear textos en negrita, debemos colocar un asterisco delante y otro detras de esta forma:
*Texto*

Tablas

En algunas plataformas web o proyectos, podemos crear tablas de datos utilizando Markdown.

Para ello, lo primero es colocar en una misma línea el nombre que tendrá cada columna de la tabla, separándolas mediante caracteres de tubería o pipe (|).

A continuación, debajo de esta línea, en una nueva línea, colocaremos una serie de caracteres guion (-) por cada columna, separados por caracteres de tubería o pipe.

Y por último, en cada fila, colocaremos los datos de cada columna entre caracteres de tubería o pipe.

Código MarkDown

| Columna1 | Columna2| 
|--------|------|
| 12   | 28   |
| 6    | 34   |

Resultado



  
    Columna1
    Columna2
  
  
    12
    28
  
  
    6
    34

Columna1	Columna2
12	28
6	34

Notas al Pie

Para crear notas al pie de un texto, lo primero es crear la nota al final del texto colocando entre dos corchetes el identificador numérico de la nota junto con un carácter caret. Una vez hecho esto, detrás de los corchetes se colocarán dos puntos seguido del texto de la nota.

Codigo

MarkDown es un lenguaje de marcado ligero para dar 
formato a textos.
[^1]: Texto Nota1
[^2]: Texto Nota2

Una vez hecho esto, indicaremos en qué lugar del texto queremos situar la nota. Para ello, colocaremos en el lugar indicado dos corchetes y dentro de ellos pondremos el carácter caret seguido del número identificador de la nota.

Codigo

MarkDown[^1] es un lenguaje de marcado ligero[^2] para dar 
formato a textos.
[^1]: Texto Nota1
[^2]: Texto Nota2

Resultado

MarkDown^[1] es un lenguaje de marcado ligero^[2] para dar 
formato a textos

[^1]: Texto Nota1
[^2]: Texto Nota2

Video explicativo sobre Formatear Texto con MarkDown

Si queréis, podeis ver una explicación mas detalla en este video: