Cómo resaltar texto con Markdown
En este tutorial aprenderás a resaltar texto en Markdown como si lo subrayaras con un marcador fluorescente.
Cuando hablamos de resaltar texto en Markdown nos referimos al efecto de marcador fluorescente, es decir, aplicar un fondo de color (habitualmente amarillo) a un fragmento de texto para llamar la atención sobre él. Es un recurso muy útil en apuntes, documentación técnica y notas de estudio.
Markdown en su versión original no incluye una sintaxis para resaltar texto. Sin embargo, varias extensiones y aplicaciones populares han adoptado una sintaxis común basada en el doble signo de igual, y siempre queda el recurso a HTML cuando el editor lo permite.
Resaltado con doble signo igual
La sintaxis más extendida para resaltar texto consiste en envolver el fragmento entre dos signos de igual a cada lado. La soportan herramientas como Obsidian, Typora o procesadores como Pandoc con la extensión Markdown adecuada.
En el siguiente ejemplo resaltamos un texto con ==:
Este es un texto con ==una parte resaltada== en mitad de la frase.Si tu editor soporta esta sintaxis, el resultado se verá así:
Resaltado mediante HTML
Si el editor que utilizas no entiende la sintaxis ==, pero sí admite HTML, puedes usar la etiqueta <mark>, que es la forma semánticamente correcta de marcar texto resaltado en HTML5.
En el siguiente ejemplo resaltamos un texto con la etiqueta <mark>:
Este es un texto con <mark>una parte resaltada</mark> en mitad de la frase.Si el editor soporta HTML, el resultado será el siguiente:
Resaltado con color personalizado
La etiqueta <mark> aplica el color de fondo que defina el navegador o la hoja de estilos, normalmente amarillo. Si necesitas un color distinto y el entorno te permite HTML en línea con atributos style, puedes recurrir a un <span> con un fondo personalizado.
En el siguiente ejemplo aplicamos un fondo de color cian a un fragmento:
Este es un texto con <span style="background-color: #06b6d4">una parte resaltada en cian</span>.El resultado se verá así:
Ten en cuenta que esta técnica depende por completo del soporte de HTML y CSS en línea del editor o plataforma donde se publique el texto. Servicios como GitHub o muchos blogs filtran los atributos style por seguridad, así que el efecto se perderá. Para esos casos, lo más fiable es ceñirse a la sintaxis == o a la etiqueta <mark> sin estilos.
Qué editores soportan el resaltado
El resaltado con == no forma parte del Markdown original, así que su soporte depende de cada herramienta. Antes de usarlo conviene saber dónde funciona y dónde se mostrará el texto tal cual, con los dos signos de igual visibles.
Estos son los casos más habituales:
- Obsidian: soporta la sintaxis
==de forma nativa, sin configurar nada. - Typora: reconoce
==y lo renderiza como texto resaltado mientras escribes. - HackMD: también admite
==dentro de su sintaxis extendida. - Pandoc: necesita la extensión
markactivada para interpretar==al convertir el documento. - GitHub y GitLab: no soportan
==y muestran los signos de igual literalmente. En estas plataformas la única vía es la etiqueta<mark>cuando el HTML está permitido. - Notion: no usa la sintaxis
==, sino su propio menú de formato y colores para aplicar el resaltado.
Si tu documento tiene que viajar entre varias de estas plataformas, lo más seguro es usar <mark> cuando se admita HTML y reservar == para los editores que sabes que lo entienden.
Combinar el resaltado con otros formatos
Puedes anidar otros estilos dentro del texto resaltado, de modo que un fragmento marcado aparezca además en negrita o en cursiva. Basta con combinar las sintaxis dentro de los signos de igual.
En el siguiente ejemplo resaltamos un texto y a la vez ponemos una parte en negrita:
Este es un texto con ==una parte **muy** importante resaltada==.Si tu editor soporta ==, el resultado se verá así:
Resaltar frente a otras formas de destacar texto
El resaltado es solo una de las maneras de llamar la atención sobre un fragmento. Según el editor y el sitio donde publiques, otras opciones pueden ser más portables o más adecuadas:
- Para enfatizar sin depender de extensiones, usa negrita y cursiva, que funcionan en cualquier procesador Markdown.
- Si lo que buscas es un color de fuente y no un fondo, consulta cómo cambiar el color del texto.
- Para subrayar texto o tacharlo tienes técnicas equivalentes con sus propias sintaxis.
Recursos relacionados
👋 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.
Sígueme en Twitter para estar al día con mi contenido. 😊
