Shortcodes em Markdown
Shortcodes são uma sintaxe especial que permite incorporar funcionalidade complexa em documentos Markdown sem escrever código HTML ou JavaScript completo.
O que são Shortcodes?
Shortcodes são trechos curtos de código fornecidos por geradores de site estático (como Hugo, Jekyll, Gatsby) para chamar funcionalidades ou componentes predefinidos em Markdown.
Sintaxe básica
Hugo
markdown
{{< shortcode-name param1="value1" >}}Jekyll
markdown
{% shortcode_name param1='value1' %}Docusaurus / MDX
markdown
<ShortcodeName param1="value1" />Shortcodes comuns
Mídia
markdown
{{< youtube "dQw4w9WgXcQ" >}}
{{< vimeo "123456789" >}}Caixas de alerta
markdown
{{< note >}}
Esta é uma nota.
{{< /note >}}
{{< warning >}}
Este é um aviso.
{{< /warning >}}Abas
markdown
{{< tabs >}}
{{< tab "Aba 1" >}}
Conteúdo da aba 1.
{{< /tab >}}
{{< tab "Aba 2" >}}
Conteúdo da aba 2.
{{< /tab >}}
{{< /tabs >}}Criar shortcodes personalizados
Shortcode personalizado Hugo
layouts/shortcodes/highlight-box.html:
html
<div class="highlight-box">
{{ .Inner | markdownify }}
</div>Uso:
markdown
{{< highlight-box >}}
Este é um conteúdo **importante**.
{{< /highlight-box >}}Melhores práticas
markdown
# Bom: simples e claro
{{< note >}}
Nota importante
{{< /note >}}
# Evitar: muito complexo
{{< container type="note" style="background:blue" >}}
Nota importante
{{< /container >}}Conclusão
Shortcodes são uma ferramenta poderosa para estender a funcionalidade do Markdown. Eles permitem adicionar recursos interativos ricos mantendo a legibilidade do conteúdo.