Guida rápida de Markdown

Por Kedinn Turpo 2016/02/25

Una guia rápida sobre Markdown, para quienes escriben en internet.

Qué es Markdown?

Markdown es una manera sencilla de darle formato a textos web, ya no necesitaremos una vista para agragarle formato o escribir HTML que se suele cometer errores, como olvidar cerrar una etiqueta. Creado por John Gruber, con ayuda de Aaron Swartz.

No mostrare demasiada teoría, solo el código y su resultado.

Contenido:

  • Cabeceras
  • Enlaces
  • Parrafos
  • Formato
  • Citas
  • Listas
  • Listas de definiciones
  • Imágenes
  • Tablas
  • Sintaxis de pre-espaciado
  • Código

Cabeceras:

# 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

Enlaces:

[Con titulo](http://www.kedinn.com "titulo")

Con titulo

[Sin titulo](http://www.kedinn.com)

Sin titulo

[Enlace 1][1], [Enlace 2][2], [Enlace 3][3]

 [1]: www.kedinn.com/blog
 [2]: www.kedinn.com "Titulo Enlace"
 [3]: www.kedinn.com/blog

Enlace 1, Enlace 2, Enlace 3

Párrafos:

Para crear párrafos dejar una linea en blanco:

Este es el primer párrafo.

Este es el segundo párrafo.

Este es el primer párrafo.

Este es el segundo párrafo.

Para crear una salto de linea, dejar dos espacios al final del texto o palabra

Esta es la primera línea  
y este es el salto de línea.

Esta es la primera línea
y este es el salto de línea.

Formato:

**Esto es negrita**

Esto es negrita

__Esto también es negrita__

Esto también es negrita

*Esto es cursiva*

Esto es cursiva

_Esto también es cursiva_

Esto también es cursiva

***Esto es negrita y cursiva***

Esto es negrita y cursiva

___Esto también es negrita y cursiva___

Esto también es negrita y cursiva

Tachado*

Esta opción no esta disponible en todos los parsers

~~texto tachado.~~

texto tachado.

Citas

> Esto es parte de un bloque de cita.
> Esto es parte del mismo bloque de cita.

Esto es parte de un bloque de cita. Esto es parte del mismo bloque de cita.

> Esto es parte de un bloque de cita.
Esto continúa el bloque aunque no hay el símbolo >

Esto es parte de un bloque de cita. Esto continúa el bloque aunque no hay el símbolo >

> Esto es parte de un bloque de cita.
> Esto es parte del mismo bloque de cita.
>
> > Esto es otro bloque de cita anidado.
> > Esto es parte del bloque anidado.
>
> Esto es parte del bloque de cita de primer nivel.

Esto es parte de un bloque de cita. Esto es parte del mismo bloque de cita.

Esto es otro bloque de cita anidado. Esto es parte del bloque anidado.

Esto es parte del bloque de cita de primer nivel.

Listas

1. Este es el primer elemento
2. Este es el segundo elemento
3. Este es el tercer elemento
  1. Este es el primer elemento
  2. Este es el segundo elemento
  3. Este es el tercer elemento
* Un elemento de la lista
* Otro elemento de la lista
* El tercer elemento de la lista
  • Un elemento de la lista
  • Otro elemento de la lista
  • El tercer elemento de la lista
    * Un elemento de la lista
    + Otro elemento de la lista
    - El tercer elemento de la lista
  • Un elemento de la lista
  • Otro elemento de la lista
  • El tercer elemento de la lista
1. Esto es una lista ordenada
2. Segundo elemento de la lista ordenada
    1. Esta es una lista ordenada anidada dentro de otra
        * Lista desordenada anidada a tercer nivel
        * Segundo elemento de esta lista
    2. Este es el segundo elemento de la lista ordenada anidada
  1. Esto es una lista ordenada
  2. Segundo elemento de la lista ordenada
    1. Esta es una lista ordenada anidada dentro de otra
      • Lista desordenada anidada a tercer nivel
      • Segundo elemento de esta lista
    2. Este es el segundo elemento de la lista ordenada anidada

Listas de definiciones

Esta opción no esta disponible en todos los parsers

Primer termino
 : Primera definición
 : Segunda definición

Segundo termino
 : Segunda definición

Imágenes

No es posible centrar una imagen, yo lo tengo centrado por mi css, ejemplo: .entrada img { display: block; margin: 0 auto; }

![Con titulo](/images/markdown2.png "titulo")

Con titulo

![Sin titulo](/images/markdown.png)

Sin titulo

![Imagen 1][1]  ![Imagen 2][2]

 [1]: /images/markdown2.png
 [2]: /images/markdown2.png "scaphandre"

Imagen 1 Imagen 2

Tablas

| Encabezado 1    | Encabezado 2 |
|-----------------|--------------|
| probemos        | algo         |
| probemos alguna | otra cosa    |
Encabezado 1 Encabezado 2
probemos algo
probemos alguna otra cosa
| Alineado a la izq. | Centrado | Alineado a la der. |
|:-------------------|:--------:|-------------------:|
| prueba             | prueba   | prueba             |
Alineado a la izq. Centrado Alineado a la der.
prueba prueba prueba

(*) No todos los parsers de Markdown soportan algunas opciones de ta tabla.

Sintaxis de pre-espaciado

En esta guia estuve utilizando pre-espaciado para los códigos

        Esto es un párrafo de código.  

Resultado:

    Esto es un párrafo de código.

Código

El uso de código es muy utilizado por los programadores

Sintaxis de triple backtick *

Agregar un bloque de código entre 3 backticks (“`) más el nombre del lenguaje, Ejemplos:

```python
for i in range(2,numero):
        if (numero%i)==0:
            # es divisible
            return False
    return True
```

Python

for i in range(2,numero):
        if (numero%i)==0:
            # es divisible
            return False
    return True

Otro ejemplo:

```java
public static int contarCaracteres(String cadena, char caracter) {
        int posicion, contador = 0;
        //cometario
        posicion = cadena.indexOf(caracter);
        while (posicion != -1) { 
            contador++;           
            posicion = cadena.indexOf(caracter, posicion + 1);
        }
        return contador;
}
```

Java

public static int contarCaracteres(String cadena, char caracter) {
        int posicion, contador = 0;
        //cometario
        posicion = cadena.indexOf(caracter);
        while (posicion != -1) { 
            contador++;           
            posicion = cadena.indexOf(caracter, posicion + 1);
        }
        return contador;
}

Conclusión

Con Markdown no es necesario utilizar una interfaz como WYSIWYG, puedes visitar a la página oficial para ver la documentación completa en daringfireball.net