Trucos Markdown: soluciones para las funciones que faltan
Los trucos markdown son fragmentos de HTML y usos ingeniosos de la sintaxis que consiguen funciones que la especificación básica de Markdown no incluye, desde texto subrayado hasta miniaturas de vídeo con enlace. Casi todos dependen de una misma condición: el renderizador tiene que aceptar HTML en línea. CommonMark deja pasar el HTML sin tocarlo por defecto, así que VS Code, Obsidian, Typora y el editor de esta web muestran estos trucos correctamente. Las plataformas con sanitización se comportan de otra manera. GitHub filtra la salida con una lista fija de etiquetas permitidas y borra todos los atributos style, mientras que Reddit y Discord ignoran el HTML por completo. Cada apartado muestra la sintaxis e indica qué renderizadores la conservan y cuáles la eliminan.
Subrayar texto
Markdown no tiene sintaxis de subrayado, así que para subrayar en markdown envuelve el texto en una etiqueta HTML <ins> o <u>. La etiqueta <ins> marca texto insertado y se muestra subrayada en todos los navegadores importantes. El sanitizador de GitHub conserva <ins> y descarta <u>, de modo que <ins> es la opción portable para los README.
Submit the form <ins>before 30 June</ins> to qualify.
Obsidian y Typora renderizan ambas etiquetas. Bear y Simplenote no pasan por el HTML y ofrecen sus propios atajos de subrayado. En Reddit las etiquetas aparecen como texto literal porque su parser descarta el HTML.
Sangrar párrafos
Markdown colapsa los espacios iniciales y convierte las sangrías de 4 espacios en bloques de código, así que sangra el párrafo con la entidad de espacio de no separación . Cada entidad sobrevive como un espacio visible en la salida. Cuatro seguidas imitan la tabulación clásica.
The opening line of this paragraph sits four spaces in.
Las entidades atraviesan casi cualquier renderizador, GitHub incluido, porque son referencias de caracteres y no etiquetas. El límite se nota con el volumen. Un documento con decenas de párrafos sangrados se vuelve difícil de leer en el código fuente, y un editor con control de plantillas, como iA Writer, gestiona la sangría con más limpieza.
Centrar texto
Para centrar texto markdown usa la etiqueta <center>, o bien <p style="text-align:center"> allí donde el CSS en línea sobreviva. HTML 4.01 marcó <center> como obsoleta ya en 1999, pero los navegadores la siguen respetando y la mayoría de los renderizadores de Markdown la dejan pasar sin tocarla.
<center>Chapter 7</center>
<p style="text-align:center">Chapter 7</p>
GitHub borra los atributos style, así que la segunda forma falla allí. Quienes escriben README centran logotipos e insignias con <div align="center">, porque el atributo align sobrevive al sanitizador de GitHub. Typora y la vista previa de VS Code renderizan la versión con CSS tal cual está escrita.
Dar color al texto
Markdown no ofrece control del color de texto markdown; usa <span style="color:#0969da"> donde se permita CSS, o la vieja etiqueta <font color="red"> en los renderizadores que todavía la aceptan.
<span style="color:#0969da">This sentence renders in blue.</span>
<font color="red">This sentence renders in red.</font>
La etiqueta <font> quedó obsoleta en 1999 y los sanitizadores modernos la tratan sin piedad. GitHub elimina tanto el atributo style como el atributo color, así que ninguna de las dos formas produce texto coloreado en un README. Un sustituto habitual allí es un bloque de código con diff como lenguaje, que pinta de verde las líneas que empiezan por + y de rojo las que empiezan por -. Obsidian y Typora respetan la versión con <span>, igual que los sitios hechos con Hugo y Jekyll que dejan pasar el HTML sin procesar.
Ocultar comentarios
Oculta una nota a los lectores con el truco de la referencia de enlace [comment]: # o con un comentario HTML estándar. Ambos métodos para escribir comentarios markdown mantienen el texto en el archivo fuente y fuera de la página renderizada.
[everything in this line disappears from the output]: #
<!-- This note also stays hidden. -->
El truco de los corchetes aprovecha las definiciones de referencia de enlace, una función básica de Markdown, así que funciona incluso donde el HTML está bloqueado. Deja una línea en blanco por encima y por debajo, o un párrafo adyacente puede fundirse con la definición. El comentario HTML se lee mejor, pero permanece dentro del código fuente de la página generada, donde cualquiera puede verlo. GitHub respeta ambos métodos.
Admoniciones y cuadros de aviso
Crea un cuadro de aviso con un emoji y una etiqueta en negrita dentro de una cita, o usa la sintaxis de alertas de GitHub, introducida en 2023.
> [!WARNING]
> This command overwrites all 14 archived backups.
> 💡 **Tip:** Blockquote callouts work in any renderer.
GitHub admite 5 tipos de alerta: NOTE, TIP, IMPORTANT, WARNING y CAUTION. Cada uno se muestra con su propio icono y color de acento en github.com, pero la sintaxis se degrada a una cita normal en cualquier otro sitio. Obsidian tiene un formato de avisos propio, > [!note], añadido en la versión 0.14 en 2022, y MkDocs con el tema Material usa líneas !!! note. La cita con emoji es la única variante que se ve aceptable en todos ellos.
Redimensionar imágenes
Cambia la sintaxis de imagen de Markdown por una etiqueta <img> y define los atributos width y height en píxeles.
<img src="diagram.png" alt="Deployment diagram" width="480" height="270">
GitHub conserva los atributos width y height aunque elimina style="width:50%", así que los valores en píxeles son el camino fiable para los README. Las dimensiones fijas también evitan saltos de maquetación mientras la página carga. Los renderizadores sin soporte de HTML muestran la etiqueta en bruto como texto, así que mantén la forma simple  en plataformas como Reddit.
Pies de imagen
Añade un pie de imagen con las etiquetas <figure> y <figcaption>, o coloca una línea en cursiva justo debajo de la imagen.
<figure>
<img src="harbor.jpg" alt="Fishing boats at dawn">
<figcaption>Hobart's harbor, photographed in March 2025.</figcaption>
</figure>
*Hobart's harbor, photographed in March 2025.*
Tanto <figure> como <figcaption> figuran en la lista de etiquetas permitidas de GitHub, así que la versión semántica funciona en los README. La línea en cursiva es el plan B para los renderizadores sin HTML. Los lectores de pantalla la anuncian como texto normal y no como pie de imagen, y ese es el precio de su portabilidad.
Enlaces que se abren en otra pestaña
Los enlaces de Markdown no pueden abrirse en otra pestaña; escribe el anclaje en HTML puro con target="_blank".
<a href="https://example.com/report" target="_blank" rel="noopener">2026 annual report</a>
Añade rel="noopener" para que la página nueva no pueda ejecutar scripts contra la ventana que la abrió. Este truco tiene poco alcance. GitHub quita el atributo target durante la sanitización, y todos los enlaces de un README se abren en la misma pestaña de todas formas. El truco funciona en generadores de sitios estáticos como Hugo y Jekyll, que dejan pasar el HTML sin tocarlo, y ahí es donde el comportamiento de pestaña nueva importa de verdad.
Símbolos y caracteres especiales
Escribe los símbolos directamente, ya que los archivos Markdown son texto Unicode plano, o usa entidades HTML cuando un símbolo sea difícil de sacar del teclado del ordenador. Copia © o → de cualquier página de referencia de caracteres y pégalo en el archivo; se renderiza tal cual.
| Símbolo | Entidad HTML |
|---|---|
| © copyright | © |
| ® registrado | ® |
| ™ marca registrada | ™ |
| → flecha derecha | → |
| ° grado | ° |
| € euro | € |
Las entidades se convierten en casi todos los renderizadores, GitHub incluido. La única trampa son los bloques de código, donde © se imprime literal porque el código delimitado desactiva la decodificación de entidades.
Tabla de contenidos
Construye una tabla de contenidos como una lista de enlaces que apunten a los ID de anclaje de los encabezados. GitHub, GitLab y la mayoría de los demás renderizadores generan un ID para cada encabezado: el texto pasa a minúsculas y los espacios se convierten en guiones, con casi toda la puntuación eliminada.
- [Underline Text](#underline-text)
- [Resize Images](#resize-images)
- [Embed Videos](#embed-videos)
Un encabezado llamado "Resize Images" recibe el anclaje #resize-images. GitHub además muestra un botón de índice automático en los encabezados de los README desde 2021, así que la lista manual se gana el sueldo en documentos largos de otras plataformas. Revisa los anclajes después de cada edición de encabezados, porque un encabezado renombrado rompe sus enlaces sin avisar.
Insertar vídeos
Markdown no puede incrustar un reproductor de vídeo, así que enlaza una miniatura clicable al vídeo. YouTube publica una miniatura de cada vídeo en una URL predecible, lo que simplifica el patrón.
[](https://www.youtube.com/watch?v=VIDEO-ID)
Sustituye VIDEO-ID por el código de 11 caracteres de la URL del vídeo. La miniatura se renderiza en cualquier sitio donde funcione el Markdown estándar, y un clic abre el vídeo en YouTube. Existen dos mejoras allí donde la plataforma lo permite. GitHub acepta subidas directas de archivos .mp4 y .mov en issues, pull requests, discusiones y archivos Markdown desde mayo de 2021, y los renderizadores con soporte completo de HTML aceptan un <iframe> de YouTube pegado.
Preguntas frecuentes
¿Funcionan los trucos de Markdown en GitHub?
Algunos sí. GitHub conserva <ins>, los atributos width de <img>, <figure>, los comentarios HTML, las entidades y su propia sintaxis de alertas, pero elimina todos los atributos style y el atributo target. Prueba cualquier truco en un gist de borrador antes de depender de él, porque la lista de etiquetas permitidas del sanitizador puede cambiar sin previo aviso.
¿Por qué mi HTML ha desaparecido de la página renderizada?
O bien el renderizador bloquea el HTML en línea por completo, como hacen Reddit y Discord, o bien eliminó durante la sanitización la etiqueta o el atributo concreto que usaste. Consulta la documentación de la plataforma en busca de una lista de elementos permitidos y cambia el elemento eliminado por uno admitido, como <div align="center"> en lugar de un atributo style.
¿Qué estilo de comentario es mejor, [comment]: # o <!-- -->?
Usa [comment]: # cuando la nota deba desaparecer por completo, y <!-- --> cuando importe más la legibilidad del código fuente. La forma con corchetes se la queda el parser de Markdown y nunca llega a la salida, mientras que un comentario HTML estándar sigue visible para cualquiera que mire el código fuente de la página.