Personalización con HTML en Markdown

Markdown fue diseñado desde su origen para ser compatible con HTML nativo. Cuando la sintaxis estándar de Markdown no es suficiente para lograr un diseño visual específico (como incrustar vídeos, alinear elementos o crear tablas con celdas combinadas), puedes intercalar etiquetas HTML directamente en el documento.

1. Integración de Etiquetas HTML Básicas #

Los motores de Markdown procesan las etiquetas HTML en línea y en bloque sin requerir ninguna configuración especial:

1Este es un texto en Markdown con <span style="color: #2563eb; font-weight: bold;">texto destacado en azul</span>.
2
3<div style="background-color: #f3f4f6; padding: 16px; border-left: 4px solid #3b82f6; border-radius: 4px;">
4    <strong>Nota técnica:</strong> Este contenedor utiliza estilos CSS en línea dentro de Markdown.
5</div>

• Resultado visual:

2. Casos de Uso Comunes de HTML en Markdown #

Incrustación de Vídeos e Iframes #

Markdown no tiene sintaxis nativa para incrustar reproductores de vídeo interactivos. Se utiliza la etiqueta <iframe>:

1<iframe 
2    width="560" 
3    height="315" 
4    src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
5    title="Reproductor de vídeo" 
6    frameborder="0" 
7    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
8    allowfullscreen>
9</iframe>

Bloques Desplegables con Etiquetas Details y Summary #

Permite ocultar contenido secundario, pistas o respuestas para que el lector las despliegue al hacer clic:

1<details>
2    <summary>Haz clic aquí para ver la solución del ejercicio</summary>
3    <p>La solución consiste en utilizar un bucle <code>for...of</code> sobre el array.</p>
4</details>

• Resultado visual:

Centrado y Alineación de Imágenes #

1<div align="center">
2    <img src="https://markdown-here.com/img/icon256.png" alt="Logo Centrado" width="120" />
3    <p><em>Figura 1: Logotipo oficial de Markdown centrado mediante HTML</em></p>
4</div>

3. Limitaciones de Seguridad y Sanitización #

1. Filtrado XSS en Plataformas: Plataformas como GitHub, GitLab o foros públicos sanitizan el HTML por seguridad, eliminando etiquetas potencialmente peligrosas como <script>, <style>, <form> o <input>.
2. Principio de Legibilidad: Abusar de etiquetas HTML rompe la principal ventaja de Markdown (la legibilidad del texto plano). Utilízalo únicamente cuando no exista alternativa en Markdown puro.