Trucos Markdown: cómo lograr las funciones que no existen
Los trucos markdown son fragmentos de HTML y jugadas creativas de sintaxis que logran funciones que la especificación base de Markdown no trae, desde texto subrayado hasta miniaturas de video en las que puedes dar clic. Casi todos los hacks dependen de una sola condición: que el renderizador acepte HTML en línea. CommonMark deja pasar el HTML crudo de forma predeterminada, así que VS Code, Obsidian, Typora y el editor de este sitio muestran estos trucos sin problema. Las plataformas que sanitizan se comportan distinto. 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 sección de abajo muestra la sintaxis y te dice qué renderizadores la conservan y cuáles la quitan.
Subrayar texto
Markdown no tiene sintaxis de subrayado, así que la forma de subrayar en markdown es envolver el texto en una etiqueta HTML <ins> o <u>. La etiqueta <ins> marca texto insertado y aparece subrayada en todos los navegadores principales. El sanitizador de GitHub conserva <ins> y bota <u>, por eso <ins> es la opción portable para los README.
Submit the form <ins>before 30 June</ins> to qualify.
Obsidian y Typora muestran las dos etiquetas. Bear y Simplenote se brincan la ruta del HTML y traen sus propios atajos de subrayado. En Reddit las etiquetas se ven como texto literal porque su parser descarta el HTML.
Poner sangría a los párrafos
Markdown colapsa los espacios al inicio y convierte las sangrías de 4 espacios en bloques de código, así que mejor pon la sangría con la entidad de espacio sin quiebre . Cada entidad sobrevive como un espacio visible en el resultado. Cuatro de ellas simulan el tabulador clásico.
The opening line of this paragraph sits four spaces in.
Las entidades pasan por casi cualquier renderizador, incluido GitHub, porque son referencias de caracteres y no etiquetas. El límite aparece cuando escalas. Un documento con decenas de párrafos con sangría se vuelve pesado de leer en el archivo fuente, y un editor con control de plantillas, como iA Writer, maneja la sangría de manera más limpia.
Centrar texto
Para centrar texto markdown ocupa la etiqueta <center>, o <p style="text-align:center"> en donde el CSS en línea sobreviva. HTML 4.01 declaró obsoleta la etiqueta <center> desde 1999, pero los navegadores todavía la respetan y la mayoría de los renderizadores de Markdown la dejan pasar intacta.
<center>Chapter 7</center>
<p style="text-align:center">Chapter 7</p>
GitHub borra los atributos style, así que la segunda forma ahí no funciona. Quienes arman un README centran logos e insignias con <div align="center">, porque el atributo align sí sobrevive al sanitizador de GitHub. Typora y la vista previa de VS Code muestran la versión con CSS tal como la escribiste.
Poner color al texto
Markdown no trae control de color de texto markdown; ocupa <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 no la perdonan. GitHub quita tanto el atributo style como el atributo color, así que ninguna de las dos formas produce texto con color en un README. Un sustituto común ahí es un bloque de código con diff como lenguaje, que pinta de verde las líneas que empiezan con + y de rojo las que empiezan con -. Obsidian y Typora respetan la versión con <span>, igual que los sitios de Hugo y Jekyll que dejan pasar el HTML crudo.
Ocultar comentarios
Esconde una nota de los lectores con el truco de referencia de enlace [comment]: # o con un comentario HTML estándar. Las dos maneras de meter comentarios markdown dejan 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 abusa de las definiciones de referencia de enlace, una función base de Markdown, así que funciona incluso donde el HTML está bloqueado. Deja una línea en blanco arriba y abajo, o un párrafo vecino se puede fusionar con la definición. El comentario HTML se lee más fácil, pero se queda dentro del código fuente de la página generada, donde cualquiera lo puede ver. GitHub acepta los dos métodos.
Admoniciones y recuadros de aviso
Crea un recuadro de aviso con un emoji y una etiqueta en negritas dentro de una cita, o usa la sintaxis de alertas de GitHub, que llegó en 2023.
> [!WARNING]
> This command overwrites all 14 archived backups.
> 💡 **Tip:** Blockquote callouts work in any renderer.
GitHub soporta 5 tipos de alerta: NOTE, TIP, IMPORTANT, WARNING y CAUTION. Cada uno aparece con su propio ícono y color de acento en github.com, pero la sintaxis se degrada a una cita normal en cualquier otro lado. Obsidian tiene su propio formato de avisos, > [!note], agregado 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 decente en todos.
Cambiar el tamaño de las imágenes
Cambia la sintaxis de imagen de Markdown por una etiqueta <img> y define los atributos width y height en pixeles.
<img src="diagram.png" alt="Deployment diagram" width="480" height="270">
GitHub conserva los atributos width y height aunque quita style="width:50%", así que los valores en pixeles son el camino confiable para los README. Las dimensiones fijas también evitan que el diseño brinque mientras carga la página. Los renderizadores sin soporte de HTML muestran la etiqueta cruda como texto, así que quédate con la forma simple  en plataformas como Reddit.
Leyendas de imagen
Agrega una leyenda con las etiquetas <figure> y <figcaption>, o pon una línea en cursivas 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> están en la lista de etiquetas permitidas de GitHub, así que la versión semántica funciona en los README. La línea en cursivas es el respaldo para renderizadores sin HTML. Los lectores de pantalla la anuncian como texto normal y no como leyenda, y ese es el costo de su portabilidad.
Ligas que se abren en otra pestaña
Las ligas de Markdown no pueden abrirse en otra pestaña; escribe el enlace en HTML crudo con target="_blank".
<a href="https://example.com/report" target="_blank" rel="noopener">2026 annual report</a>
Agrega rel="noopener" para que la página nueva no pueda ejecutar scripts contra la ventana que la abrió. Este hack tiene alcance corto. GitHub quita el atributo target durante la sanitización, y de todos modos cada liga de un README se abre en la misma pestaña. El truco funciona en generadores de sitios estáticos como Hugo y Jekyll, que dejan pasar el HTML intacto, y ahí es donde de verdad importa abrir en pestaña nueva.
Símbolos y caracteres especiales
Escribe los símbolos directo, ya que los archivos Markdown son texto Unicode plano, o usa entidades HTML cuando un símbolo sea difícil de teclear en tu computadora. Copia © o → de cualquier página de referencia de caracteres y pégalo en el archivo; se muestra sin cambios.
| Símbolo | Entidad HTML |
|---|---|
| © copyright | © |
| ® registrado | ® |
| ™ marca registrada | ™ |
| → flecha derecha | → |
| ° grado | ° |
| € euro | € |
Las entidades se convierten en casi todos los renderizadores, incluido GitHub. La única trampa son los bloques de código, donde © se imprime literal porque el código delimitado desactiva la decodificación de entidades.
Índice de contenidos
Arma un índice como una lista con viñetas de ligas que apunten a los ID de ancla de los encabezados. GitHub, GitLab y la mayoría de los demás renderizadores generan un ID para cada encabezado: el texto se pasa a minúsculas y los espacios se vuelven 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 ancla #resize-images. Además, GitHub muestra un botón de índice automático en los encabezados de los README desde 2021, así que la lista manual se justifica en documentos largos de otras plataformas. Checa las anclas después de cada edición de encabezados, porque un encabezado renombrado rompe sus ligas sin avisarte.
Insertar videos
Markdown no puede incrustar un reproductor de video, así que liga una miniatura con clic al video. YouTube publica una miniatura de cada video en una URL predecible, y eso simplifica el patrón.
[](https://www.youtube.com/watch?v=VIDEO-ID)
Reemplaza VIDEO-ID con el código de 11 caracteres de la URL del video. La miniatura se muestra en cualquier lugar donde funcione el Markdown estándar, y al dar clic se abre el video en YouTube. Hay dos mejoras donde la plataforma lo permite. GitHub acepta subir archivos .mp4 y .mov directo 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
¿Los trucos de Markdown funcionan 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 quita todos los atributos style y el atributo target. Prueba cualquier hack en un gist de borrador antes de confiarte, porque la lista de etiquetas permitidas del sanitizador puede cambiar sin aviso.
¿Por qué desapareció mi HTML de la página renderizada?
O el renderizador bloquea el HTML en línea por completo, como hacen Reddit y Discord, o quitó durante la sanitización la etiqueta o el atributo específico que usaste. Revisa la documentación de la plataforma para encontrar la lista de elementos permitidos y cambia el elemento eliminado por uno aceptado, 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 archivo fuente. La forma con corchetes se la come el parser de Markdown y nunca llega al resultado, mientras que un comentario HTML estándar queda visible para cualquiera que revise el código fuente de la página.