Cómo indentar texto con Markdown

En este tutorial aprenderás a indentar o sangrar texto en Markdown usando citas, listas y entidades HTML.

Indentar texto, es decir, aplicar una sangría hacia la derecha al inicio de un párrafo o de una línea, es una necesidad habitual al redactar libros, artículos académicos o cualquier documento que siga convenciones tipográficas tradicionales. El problema es que Markdown ignora los espacios y tabuladores que añadas al principio de una línea de texto plano, por lo que la sangría literal con la tecla Tab no funciona.

A continuación verás las técnicas más usadas para conseguir una indentación visible: citas, listas anidadas, entidades HTML y CSS en línea.

Indentar con bloques de cita

El método más sencillo y compatible es usar el símbolo > que define un bloque de cita. Aunque su finalidad original es marcar citas textuales, casi todos los procesadores aplican una sangría a la izquierda al renderizarlas, lo que cumple el efecto visual buscado en muchos casos.

En el siguiente ejemplo indentamos un párrafo con >:

Este es un párrafo de texto sin indentar.

> Este párrafo aparece indentado mediante un bloque de cita.

El resultado se verá así:

Este es un párrafo de texto sin indentar.

Este párrafo aparece indentado mediante un bloque de cita.

Si quieres una sangría aún mayor, puedes anidar varios bloques de cita añadiendo más signos > al principio de la línea.

Indentar con listas

Otra forma de conseguir un texto indentado es introducirlo dentro de una lista, ya sea ordenada o no ordenada. Las listas aplican una sangría a la izquierda y, si el procesador lo permite, los párrafos siguientes al primer ítem heredarán esa sangría.

En el siguiente ejemplo simulamos un párrafo indentado con un guion:

- Este es un párrafo indentado como ítem de lista.

El resultado será:

  • Este es un párrafo indentado como ítem de lista.

Tiene el inconveniente de que aparece la viñeta o el número al inicio, así que no es la mejor opción si necesitas indentar texto puro sin ningún marcador.

Indentar con entidades HTML de espacio

Si lo único que quieres es añadir espacios al principio de una línea sin recurrir a bloques de cita ni listas, puedes usar la entidad HTML   (espacio sin separación) o   (espacio largo, equivalente al ancho de una letra M). Ambas se renderizan en la mayoría de procesadores que admiten HTML.

En el siguiente ejemplo aplicamos cuatro espacios largos al principio del párrafo:

    Este párrafo arranca con una sangría francesa simulada con entidades HTML.

El resultado se verá así:

    Este párrafo arranca con una sangría francesa simulada con entidades HTML.

Es una técnica un poco artesanal y poco semántica, pero muy compatible y útil para casos puntuales como sangrar la primera línea de un párrafo a la manera de un libro impreso.

Indentar con HTML y CSS en línea

Si el entorno donde publicas admite atributos style, la opción más limpia es envolver el texto en un <p> o un <div> con la propiedad CSS padding-left o margin-left. Esto te da control total sobre la cantidad de sangría sin recurrir a hacks visuales.

En el siguiente ejemplo aplicamos una sangría de 2 em:

<p style="padding-left: 2em">Este párrafo lleva una sangría de 2 em aplicada por CSS en línea.</p>

El resultado, si el entorno lo permite, será:

Este párrafo lleva una sangría de 2 em aplicada por CSS en línea.

Ten presente que plataformas como GitHub o muchos blogs filtran los atributos style por motivos de seguridad. En esos entornos esta técnica no surte efecto y deberás recurrir a los métodos anteriores.

Esto ha sido todo.

👋 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. 😊