Shortcodes en Markdown
Los shortcodes son una sintaxis especial que permite incrustar funcionalidad compleja en documentos Markdown sin escribir código HTML o JavaScript completo.
¿Qué son los Shortcodes?
Los shortcodes son fragmentos de código cortos proporcionados por generadores de sitios estáticos (como Hugo, Jekyll, Gatsby) para llamar funcionalidades o componentes predefinidos en Markdown.
Sintaxis básica
Hugo
markdown
{{< shortcode-name param1="value1" >}}Jekyll
markdown
{% shortcode_name param1='value1' %}Docusaurus / MDX
markdown
<ShortcodeName param1="value1" />Shortcodes comunes
Medios
markdown
{{< youtube "dQw4w9WgXcQ" >}}
{{< vimeo "123456789" >}}Cajas de alerta
markdown
{{< note >}}
Esto es una nota.
{{< /note >}}
{{< warning >}}
Esto es una advertencia.
{{< /warning >}}Pestañas
markdown
{{< tabs >}}
{{< tab "Pestaña 1" >}}
Contenido de la pestaña 1.
{{< /tab >}}
{{< tab "Pestaña 2" >}}
Contenido de la pestaña 2.
{{< /tab >}}
{{< /tabs >}}Crear shortcodes personalizados
Shortcode personalizado Hugo
layouts/shortcodes/highlight-box.html:
html
<div class="highlight-box">
{{ .Inner | markdownify }}
</div>Uso:
markdown
{{< highlight-box >}}
Este es contenido **importante**.
{{< /highlight-box >}}Mejores prácticas
markdown
# Bueno: simple y claro
{{< note >}}
Nota importante
{{< /note >}}
# Evitar: demasiado complejo
{{< container type="note" style="background:blue" >}}
Nota importante
{{< /container >}}Conclusión
Los shortcodes son una herramienta poderosa para extender la funcionalidad de Markdown. Te permiten agregar funcionalidades interactivas ricas mientras mantienes la legibilidad del contenido.