Skip to content

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:

markdown
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:

markdown
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:

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 de enlace==

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/HerramientaSoporte de ResaltadoSintaxis
GitHub MarkdownNo soportado
GitLab Markdown==resaltado==
HugoUsa etiqueta mark o ==resaltado==
VitePress==resaltado==
Pandoc==resaltado== o [resaltado]{.mark}
JekyllDepende del tema y plugins usados
CommonMarkNo 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:

html
<!-- 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:

markdown
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:

markdown
# 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:

  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

Materiales Educativos

El resaltado es especialmente útil en materiales de enseñanza y formación:

markdown
## 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:

markdown
> "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:

css
/* 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:

markdown
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

markdown
✅ 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:

  1. Asegura suficiente contraste entre los colores de resaltado y el fondo
  2. No dependas solo del color para transmitir información
  3. Considera añadir marcadores adicionales (como iconos o títulos) para el contenido resaltado
  4. 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:

  1. Verifica si la plataforma soporta la sintaxis == para resaltado
  2. Prueba usando etiquetas HTML <mark> como alternativa
  3. Asegúrate de que no haya espacios entre == y el texto resaltado
  4. Comprueba si el documento referencia los estilos CSS correctos

Conflictos con Otros Formatos

El resaltado a veces entra en conflicto con otros formatos:

markdown
<!-- 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:

markdown
<!-- 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.

Construido con VitePress