Cómo anidar listas con Markdown

En este tutorial aprenderás a anidar listas usando Markdown

Las listas son uno de los elementos más utilizados en Markdown. En muchas ocasiones necesitarás crear sublistas dentro de una lista principal para organizar la información en varios niveles de profundidad. Markdown soporta el anidamiento tanto en listas ordenadas como desordenadas, e incluso permite mezclar ambos tipos.

Anida listas desordenadas

Para anidar una lista dentro de otra, simplemente indenta los elementos de la sublista con dos espacios, cuatro espacios o un tabulador (según el editor que uses). Lo más común y recomendado es usar cuatro espacios.

En el siguiente ejemplo anidamos una lista dentro de otra:

- Frutas
    - Manzana
    - Naranja
    - Plátano
- Verduras
    - Lechuga
    - Tomate

El código Markdown anterior debería renderizarse así:

  • Frutas
    • Manzana
    • Naranja
    • Plátano
  • Verduras
    • Lechuga
    • Tomate

Anida listas ordenadas

El mismo principio se aplica a las listas ordenadas. Indenta los elementos de la sublista para crear un segundo nivel:

1. Primer paso
    1. Subpaso uno
    2. Subpaso dos
2. Segundo paso
3. Tercer paso

El código Markdown anterior debería renderizarse así:

  1. Primer paso
    1. Subpaso uno
    2. Subpaso dos
  2. Segundo paso
  3. Tercer paso

Combina listas ordenadas y desordenadas

Puedes mezclar ambos tipos de lista en distintos niveles. Por ejemplo, una lista desordenada con sublistas ordenadas:

- Preparar la receta
    1. Precalentar el horno a 180°C
    2. Mezclar los ingredientes secos
    3. Añadir los líquidos
    4. Hornear durante 30 minutos
- Servir el plato
- Recoger la cocina

O al revés, una lista ordenada con sublistas desordenadas:

1. Lenguajes de frontend
    - HTML
    - CSS
    - JavaScript
2. Lenguajes de backend
    - Python
    - Java
    - PHP
3. Bases de datos
    - MySQL
    - PostgreSQL
    - MongoDB

Anidamiento de tres o más niveles

Markdown permite anidar listas en tres o más niveles de profundidad. Para cada nivel adicional, añade cuatro espacios más de indentación:

- Animales
    - Mamíferos
        - Perro
        - Gato
        - Caballo
    - Aves
        - Águila
        - Loro
    - Peces
        - Salmón
        - Trucha
- Plantas
    - Árboles
        - Roble
        - Pino

El código anterior debería renderizarse así:

  • Animales
    • Mamíferos
      • Perro
      • Gato
      • Caballo
    • Aves
      • Águila
      • Loro
    • Peces
      • Salmón
      • Trucha
  • Plantas
    • Árboles
      • Roble
      • Pino

Aunque técnicamente puedes anidar tantos niveles como quieras, se recomienda no superar los tres niveles para mantener la legibilidad del documento.

Añade contenido entre elementos de la lista

Puedes insertar párrafos, bloques de código u otros elementos entre los items de una lista si los indentas correctamente al mismo nivel que el contenido del item:

1. Instala las dependencias

    Asegúrate de tener Node.js instalado antes de continuar.

    ```bash
    npm install
    ```

2. Configura el entorno

    Crea un archivo `.env` con las variables necesarias.

3. Inicia el servidor

    ```bash
    npm run dev
    ```

Es fundamental que el contenido adicional esté indentado al mismo nivel que el texto del item de la lista. De lo contrario, Markdown romperá la lista y empezará un nuevo bloque.

Errores comunes al anidar listas

Indentación inconsistente

El error más frecuente es mezclar espacios y tabuladores, o no ser consistente con el número de espacios. Esto puede hacer que la lista se renderice de forma inesperada:

- Elemento principal
  - Subelemento con 2 espacios
    - Subelemento con 4 espacios
        - Subelemento con 8 espacios

Lo mejor es elegir una indentación (normalmente 4 espacios) y mantenerla de forma consistente en todo el documento.

Olvidar la línea en blanco

Cuando añades párrafos dentro de una lista, es importante dejar una línea en blanco entre el item y el párrafo. Sin esa línea, algunos editores no interpretarán el texto como parte del item:

- Item con párrafo

    Este párrafo pertenece al item anterior.

- Otro item

La mayoría de editores Markdown soportan el anidamiento sin problemas, aunque la indentación requerida puede variar de un editor a otro. Si algo no se renderiza correctamente, prueba a ajustar el número de espacios.

Esto ha sido todo. Espero que te haya sido útil.

👋 Hola! Soy Edu, me encanta crear cosas y he redactado este tutorial. Si te ha resultado útil, el mayor favor que me podrías hacer es el de compatirlo en Twitter.

para estar al día con mi contenido. 😊