Listas

Listas con viñeta

Una lista es un conjunto de entradas precedido por viñetas:

Lista de colores:

• rojo
• verde
• azul

Para crear una lista con viñetas, en formato markdown cada elemento va precedido por un marcador. Podemos usar como marcadores unos asteriscos (*), guiones (-) o símbolos de suma (+). Por ejemplo:

Lista de colores:

- rojo
- verde
- azul

Entre el marcador (viñeta/número) y el texto debemos dejar al menos un espacio. Se recomienda alinear el texto a una sangría de cuatro espacios:

Lista de colores:

-   rojo
-   verde
-   azul

    texto sangrado cuatro espacios

Al trasladar el texto a HTML, la lista en su conjunto se delimita por etiquetas <ul>, abreviatura de unordered list. Cada elemento se delimita entre etiquetas <li>:

<p>Lista de colores:</p>

<ul>
<li>rojo</li>
<li>verde</li>
<li>azul</li>
</ul>

Marcadores

Por defecto se usa un círculo sólido como marcador. Podemos usar otros marcadores mediante el atributo list-style-type de la etiqueta ul:

<ul style="list-style-type:circle;">
<li>rojo</li>
<li>verde</li>
<li>azul</li>
</ul>

Muestra:

• rojo
• verde
• azul

Los posibles valores de la propiedad list-style-type son:

• disc - círculo sólido
• circle - círculo vacío
• square - recuadro
• none - sin mostrar marcador

Listas numeradas

Las listas numeradas utilizan números de orden en lugar de viñetas:

Lista de colores:

1. rojo
2. verde
3. azul

En formato markdown se escriben de la siguiente forma:

Lista de colores:

1.  rojo
2.  verde
3.  azul

Véase que cambiamos el símbolo por un número, seguido de un punto.

En HTML se sustituye la etiqueta <ul> por <ol> (ordered list):

<p>Lista de colores:</p>

<ol>
<li>rojo</li>
<li>verde</li>
<li>azul</li>
</ol>

Pero obsérvese que la numeración es eliminada del archivo HTML. Simplemente, se indica al navegador web que debe mostrar números, y en principio se asume que empiezan por 1. En formato markdown, podríamos escribir:

Lista de colores:

1.  rojo
1.  verde
1.  azul

... y el resultado final mostraría números 1, 2, 3 ... La numeración es responsabilidad del navegador al componer la página. ¿Como establecer otra numeración? Con el formato markdown tenemos pocas opciones, pero podemos usar de forma manual etiquetas HTML como parte del texto, configurando la lista mediante atributos en la etiqueta de apertura:

Lista de colores:

<ol start="9">

<li> rojo</li>
<li> verde</li>
<li> azul</li>

</ol>

Lo que muestra:

Lista de colores:

9. rojo
10. verde
11. azul

Como de costumbre, los atributos HTML proporcionan muchas posibilidades. Por ejemplo, para mostrar números romanos:

Lista de colores:

1. rojo
2. verde
3. azul

lo que se consigue con el atributo type:

<ol type="I">
<li> rojo</li>
<li> verde</li>
<li> azul</li>
</ol>

Elementos multilínea en markdown

Cada elemento finaliza al introducir el siguiente elemento con un marcador, o bien, al encontrar una línea en blanco. Sucesivas líneas de texto formarán parte del elemento y su unirán en una sola:

*   Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi,  viverra nec, 
fringilla in, laoreet vitae, risus.

*   Donec sit amet nisl.
Aliquam semper ipsum sit amet velit.
Suspendisse id sem consectetuer
libero luctus adipiscing.

Pero es más elegante escribir el texto alineado:

*   Lorem ipsum dolor sit amet,
    consectetuer adipiscing elit.
    Aliquam hendrerit mi posuere lectus.
    Vestibulum enim wisi,  viverra nec,
    fringilla in, laoreet vitae, risus.

*   Donec sit amet nisl.
    Aliquam semper ipsum sit amet velit.
    Suspendisse id sem consectetuer
    libero luctus adipiscing.

Si queremos que un nuevo párrafo forme parte del elemento anterior, debemos alinear el sangrado de la primera línea del párrafo, que debe consistir en al menos cuatro espacios:

1.  Elemento con dos párrafos.
    Lorem ipsum dolor sit amet,
    consectetuer adipiscing elit.
    Aliquam hendrerit mi posuere lectus.

    Vestibulum enim wisi, viverra nec,
    fringilla in, laoreet vitae, risus.
    Donec sit amet nisl.
    Aliquam semper ipsum sit amet velit.

2.  Suspendisse id sem consectetuer
    libero luctus adipiscing.

Si colocamos una cita dentro de un elemento, el carácter > debe estar sangrado de forma consistente:

*   un elemento con cita:

    > Una cita dentro de un
    > elemento de lista

Para colocar un bloque de texto preformateado dentro de un elemento de lista, tenemos que sangrarlo con al menos ocho espacios:

* Un elemento de lista:

        texto preformateado

Evitar listas accidentales

Nótese que podríamos crear un elemento de lista accidentalmente. Por ejemplo:

1986. Un año muy especial.

La solución es poner una barra invertida \ antes del punto, que no será mostrada. Estas barras hacen que el carácter que viene a continuación se considere como texto regular.

1986\. Un año muy especial.

Listas anidadas

Podemos crear una lista dentro de otra si añadimos sangrado de cuatro espacios a la lista interna:

- Elemento 1
    - elemento 1.1
    - elemento 1.2
- Elemento 2

lo que muestra:

• Elemento 1
  • elemento 1.1
  • elemento 1.2
• Elemento 2

En general, resulta conveniente ajustar los elementos de lista a espaciado que se alinee con el sangrado de cuatro caracteres:

-   Elemento 1
    -   elemento 1.1
    -   elemento 1.2
-   Elemento 2