Resaltado
El resaltado es una sintaxis extendida en Markdown utilizada para enfatizar texto importante en los documentos. Ayuda a los lectores a identificar rápidamente información clave, haciendo los documentos más vivos y efectivos.
Sintaxis Básica
Marcar Resaltados
En la mayoría de las extensiones de Markdown que soportan resaltado, el texto resaltado se rodea con dos signos de igual (==
) alrededor del contenido a resaltar:
Este es un párrafo de ejemplo que contiene ==texto resaltado==.
Efecto de Renderizado:
Este es un párrafo de ejemplo que contiene ==texto resaltado==.
Resaltado de Palabras y Frases
El resaltado puede aplicarse a palabras individuales o frases:
En programación, ==variables== son espacios nombrados para almacenar datos.
Por favor, asegúrate de leer las ==notas y advertencias importantes== en la documentación.
Efecto de Renderizado:
En programación, ==variables== son espacios nombrados para almacenar datos.
Por favor, asegúrate de leer las ==notas y advertencias importantes== en la documentación.
Uso Avanzado
Combinación con Otros Formatos
El resaltado puede combinarse con otros formatos de Markdown:
==**Resaltado en negrita**==
==*Resaltado en cursiva*==
==***Resaltado en negrita y cursiva***==
==`Resaltado en código`==
==[Resaltado de enlace](https://www.markdownlang.com)==
Efecto de Renderizado:
==Resaltado en negrita==
==Resaltado en cursiva==
==Resaltado en negrita y cursiva==
==Resaltado en código
==
Resaltado a Nivel de Bloque
Algunas implementaciones de Markdown permiten aplicar resaltado a todo un bloque de contenido, usualmente usando sintaxis de contenedor personalizado:
::: highlight
Este es un bloque de párrafo resaltado.
Puede contener varias líneas de contenido, e incluso incluir listas:
- Elemento 1
- Elemento 2
- Elemento 3
:::
Nota: El soporte para resaltado a nivel de bloque varía según el procesador de Markdown. El ejemplo anterior está disponible en plataformas como VitePress que soportan contenedores personalizados.
Compatibilidad y Diferencias de Implementación
Estado de Soporte en Diferentes Plataformas
Plataforma/Herramienta | Soporte de Resaltado | Sintaxis |
---|---|---|
GitHub Markdown | ❌ | No soportado |
GitLab Markdown | ✅ | ==resaltado== |
Hugo | ✅ | Usa etiqueta mark o ==resaltado== |
VitePress | ✅ | ==resaltado== |
Pandoc | ✅ | ==resaltado== o [resaltado]{.mark} |
Jekyll | ✅ | Depende del tema y plugins usados |
CommonMark | ❌ | No soportado |
Formato de Salida HTML
La mayoría de los procesadores de Markdown que soportan resaltado convierten el texto resaltado a HTML con etiquetas <mark>
o clases CSS específicas:
<!-- Usando etiqueta mark -->
<p>Este es un párrafo de ejemplo que contiene <mark>texto resaltado</mark>.</p>
<!-- Usando clase personalizada -->
<p>Este es un párrafo de ejemplo que contiene <span class="highlighted">texto resaltado</span>.</p>
Sintaxis Alternativa
En plataformas que no soportan la sintaxis de resaltado, puedes usar etiquetas HTML como alternativa:
Este es un párrafo de ejemplo que contiene <mark>texto resaltado</mark>.
<!-- O usando estilos personalizados -->
Este es un párrafo de ejemplo que contiene <span style="background-color: yellow;">texto resaltado</span>.
Escenarios de Uso
Énfasis en Documentos
El resaltado es adecuado para enfatizar contenido importante en los documentos:
# Guía de Instalación
Por favor, ==haz una copia de seguridad completa de tus datos== antes de la instalación. El proceso de instalación del sistema formateará la partición de destino.
Pasos de instalación:
1. Descarga el instalador
2. Ejecuta el asistente de instalación
3. ==Selecciona la opción "Instalación personalizada"==
4. Sigue las instrucciones en pantalla para completar la instalación
Efecto de Renderizado:
Guía de Instalación
Por favor, ==haz una copia de seguridad completa de tus datos== antes de la instalación. El proceso de instalación del sistema formateará la partición de destino.
Pasos de instalación:
- Descarga el instalador
- Ejecuta el asistente de instalación
- ==Selecciona la opción "Instalación personalizada"==
- Sigue las instrucciones en pantalla para completar la instalación
Materiales Educativos
El resaltado es especialmente útil en materiales de enseñanza y formación:
## Variables en Python
En Python, la asignación de variables utiliza el símbolo `=`:
```python
x = 10 # Asigna el valor 10 a la variable x
==Python es un lenguaje de tipado dinámico, donde los tipos de variables se determinan automáticamente durante la asignación.==
Tipos de variables comunes incluyen:
- Entero (int)
- Flotante (float)
- Cadena (str)
- Booleano (bool)
### Comparación y Revisión de Textos
El resaltado puede usarse para enfatizar cambios o diferencias en los documentos:
```markdown
## Comparación de Versiones del Documento
### Versión Original
El servidor se someterá a mantenimiento todos los domingos a las 2:00 AM.
### Versión Actualizada
El servidor se someterá a mantenimiento todos los domingos a las 2:00 AM. ==Se espera que el mantenimiento dure 2 horas.==
Efecto de Renderizado:
Comparación de Versiones del Documento
Versión Original
El servidor se someterá a mantenimiento todos los domingos a las 2:00 AM.
Versión Actualizada
El servidor se someterá a mantenimiento todos los domingos a las 2:00 AM. ==Se espera que el mantenimiento dure 2 horas.==
Citas y Anotaciones
El resaltado puede usarse para marcar puntos clave en textos citados:
> "Este es un texto citado, ==donde esta parte es especialmente importante==, requiriendo especial atención de los lectores."
>
> — Algún autor famoso
Efecto de Renderizado:
"Este es un texto citado, ==donde esta parte es especialmente importante==, requiriendo especial atención de los lectores."
— Algún autor famoso
Personalización de Estilo
En entornos que permiten personalización CSS, puedes modificar el estilo del texto resaltado:
/* Estilos personalizados de resaltado */
mark, .highlighted {
background-color: #ffeb3b; /* Fondo amarillo */
color: #000; /* Texto negro */
padding: 0 3px; /* Relleno */
border-radius: 3px; /* Bordes redondeados */
}
/* Diferentes tipos de resaltado */
.highlight-warning {
background-color: #ffcdd2; /* Resaltado rojo de advertencia */
}
.highlight-success {
background-color: #c8e6c9; /* Resaltado verde de éxito */
}
Usando estilos personalizados:
Esto es <mark class="highlight-warning">información de advertencia</mark>, esto es <mark class="highlight-success">información de éxito</mark>.
Mejores Prácticas
Recomendaciones de Uso
✅ Prácticas recomendadas:
1. **Usa el resaltado con moderación**:
- Solo resalta contenido realmente importante
- Demasiado resaltado debilita el efecto de énfasis
2. **Mantén la consistencia**:
- Usa un estilo de resaltado consistente en todo el documento
- Usa diferentes estilos de resaltado para distintos tipos de contenido importante
3. **Combina con el contexto**:
- Asegúrate de que el contenido resaltado tenga conexión lógica con el texto circundante
- Puedes añadir breves explicaciones de por qué cierto contenido está resaltado
❌ Prácticas a evitar:
1. Resaltar párrafos demasiado largos o capítulos enteros
2. Abusar del resaltado en una sola página
3. Añadir resaltado a contenido poco importante
4. Usar demasiados colores o estilos diferentes de resaltado
Consideraciones de Accesibilidad
El resaltado puede dificultar la lectura para algunos usuarios. Considera los siguientes puntos:
- Asegura suficiente contraste entre los colores de resaltado y el fondo
- No dependas solo del color para transmitir información
- Considera añadir marcadores adicionales (como iconos o títulos) para el contenido resaltado
- Prueba la legibilidad del documento en diferentes modos de lectura (como modo oscuro)
Soluciones a Problemas Comunes
El Resaltado No se Muestra
Si tu resaltado no se muestra correctamente:
- Verifica si la plataforma soporta la sintaxis
==
para resaltado - Prueba usando etiquetas HTML
<mark>
como alternativa - Asegúrate de que no haya espacios entre
==
y el texto resaltado - Comprueba si el documento referencia los estilos CSS correctos
Conflictos con Otros Formatos
El resaltado a veces entra en conflicto con otros formatos:
<!-- Escritura potencialmente problemática -->
==**Contenido [formateado](https://www.markdownlang.com) complejo**==
<!-- Escritura más segura -->
<mark>**Contenido [formateado](https://www.markdownlang.com) complejo**</mark>
Problemas con el Resaltado a Nivel de Bloque
Para casos que requieren resaltar bloques completos, se recomienda usar HTML o contenedores personalizados:
<!-- Usando HTML -->
<div class="highlighted-block">
# Capítulo Importante
Este es un bloque de contenido que necesita resaltado general.
</div>
<!-- O usando contenedores personalizados (en plataformas compatibles) -->
::: highlight
# Capítulo Importante
Este es un bloque de contenido que necesita resaltado general.
:::
Sintaxis Relacionada
- Énfasis - Sintaxis de énfasis de texto (negrita, cursiva)
- Citas - Sintaxis de cita en bloque
- HTML - Uso de HTML en Markdown
Herramientas y Plugins
- markdown-it-mark: Añade soporte de resaltado para markdown-it
- remark-highlight.js: Añade resaltado de sintaxis para código
- gatsby-remark-highlight-code: Plugin de resaltado de código en Gatsby
Resumen
El resaltado es una sintaxis de extensión efectiva que puede mejorar la legibilidad y la visibilidad de la información clave en los documentos. Aunque no todos los procesadores de Markdown soportan nativamente la sintaxis de resaltado, mediante etiquetas HTML y CSS personalizado, podemos lograr efectos similares en casi cualquier entorno. El uso razonable del resaltado puede ayudar a los lectores a localizar rápidamente el contenido importante, mejorando la experiencia de lectura general.