Shortcodes dans Markdown
Les shortcodes sont une syntaxe spéciale permettant d'intégrer des fonctionnalités complexes dans les documents Markdown sans écrire de code HTML ou JavaScript complet.
Qu'est-ce qu'un Shortcode ?
Les shortcodes sont de courts extraits de code fournis par les générateurs de sites statiques (comme Hugo, Jekyll, Gatsby) pour appeler des fonctionnalités ou composants prédéfinis dans Markdown.
Syntaxe de base
Hugo
markdown
{{< shortcode-name param1="value1" >}}Jekyll
markdown
{% shortcode_name param1='value1' %}Docusaurus / MDX
markdown
<ShortcodeName param1="value1" />Shortcodes courants
Médias
markdown
{{< youtube "dQw4w9WgXcQ" >}}
{{< vimeo "123456789" >}}Boîtes d'alerte
markdown
{{< note >}}
Ceci est une note.
{{< /note >}}
{{< warning >}}
Ceci est un avertissement.
{{< /warning >}}Onglets
markdown
{{< tabs >}}
{{< tab "Onglet 1" >}}
Contenu de l'onglet 1.
{{< /tab >}}
{{< tab "Onglet 2" >}}
Contenu de l'onglet 2.
{{< /tab >}}
{{< /tabs >}}Créer des shortcodes personnalisés
Shortcode personnalisé Hugo
layouts/shortcodes/highlight-box.html :
html
<div class="highlight-box">
{{ .Inner | markdownify }}
</div>Utilisation :
markdown
{{< highlight-box >}}
Ceci est un contenu **important**.
{{< /highlight-box >}}Meilleures pratiques
markdown
# Bon : simple et clair
{{< note >}}
Note importante
{{< /note >}}
# Éviter : trop complexe
{{< container type="note" style="background:blue" >}}
Note importante
{{< /container >}}Conclusion
Les shortcodes sont un outil puissant pour étendre les fonctionnalités Markdown. Ils vous permettent d'ajouter des fonctionnalités interactives riches tout en maintenant la lisibilité du contenu.