Cómo mostrar advertencias con Markdown

En ocasiones querrías poder destacar un mensaje mediante una advertencia para avisar al usuario. Para ello podrías usar una advertencia, tal y como harías en una web. De hecho, muchos frameworks CSS incorporan estilos por defecto para las advertencias. Sin embargo las advertencias no están soportadas por Markdown.

Podrías usar alguna herramienta que incluya la funcionalidad de agregar advertencias como el generador de sitios estáticos MkDocs o algún framework que te permita programar esta funcionalidad, como Laravel. En cualquier otro caso tendrás que buscar alternativas.

Lo que puedes hacer es usar un pequeño truco mediante el cual podrás insertar anotaciones, mensajes informativos, alertas o consejos. En última instancia también puedes usar HTML.

Inserta advertencias con Markdown

Para simular una advertencia con markdown puedes usar una cita seguida de un emoji, un texto en negrita, dos puntos : y el contenido del mensaje.

En este ejemplo insertamos un mensaje de advertencia:

> :warning: **Aviso**: Este es un mensaje de aviso.

Cuando se renderice la cita, deberías ver algo simiar a un mensaje de aviso:

⚠️ Aviso: Este es un mensaje de aviso.

También puedes mostrar un consejo usando el emoji adecuado:

> :memo: **Aviso**: Este es un mensaje de aviso.

Cuando se renderice la cita, deberías ver esto:

💡 Consejo: Este es un mensaje de aviso.

Finalmente, también puedes mostrar un mensaje de información:

> :memo: **Nota:** Esto es una nota.

Cuando se renderice la cita, deberías ver esto:

📝 Consejo: Este es un mensaje de aviso.

Inserta advertencias con HTML

Si tu editor Markdown soporta el uso de HTML y vas a publicar tus contenidos en una web, siempre puedes mostrar alertas con HTML y CSS. Por ejemplo, si vas a usar framework como Tailwind CSS, pudes mostrar alertas de este modo:

<div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4 pt-0.5 pb-0.5" role="alert">
  <p class="font-bold">Aviso</p>
  <p>Este es un mensaje de aviso.</p>
</div>

El resultado de renderizar el HTML anterior será el siguiente:

Esto ha sido todo.