Shortcodes in Markdown
Shortcodes sind eine spezielle Syntax, mit der Sie komplexe Funktionen in Markdown-Dokumente einbetten können, ohne vollständigen HTML- oder JavaScript-Code schreiben zu müssen.
Was sind Shortcodes?
Shortcodes sind kurze Code-Snippets, die von Static Site Generators (wie Hugo, Jekyll, Gatsby) bereitgestellt werden und vordefinierte Funktionen oder Komponenten in Markdown aufrufen können.
Grundlegende Syntax
Hugo
markdown
{{< shortcode-name param1="value1" >}}Jekyll
markdown
{% shortcode_name param1='value1' %}Docusaurus / MDX
markdown
<ShortcodeName param1="value1" />Häufige Shortcodes
Medien
markdown
{{< youtube "dQw4w9WgXcQ" >}}
{{< vimeo "123456789" >}}Warnboxen
markdown
{{< note >}}
Dies ist ein Hinweis.
{{< /note >}}
{{< warning >}}
Dies ist eine Warnung.
{{< /warning >}}Tabs
markdown
{{< tabs >}}
{{< tab "Tab 1" >}}
Dies ist der Inhalt von Tab 1.
{{< /tab >}}
{{< tab "Tab 2" >}}
Dies ist der Inhalt von Tab 2.
{{< /tab >}}
{{< /tabs >}}Benutzerdefinierte Shortcodes erstellen
Hugo Benutzerdefinierter Shortcode
layouts/shortcodes/highlight-box.html:
html
<div class="highlight-box">
{{ .Inner | markdownify }}
</div>Verwendung:
markdown
{{< highlight-box >}}
Dies ist **wichtiger** Inhalt.
{{< /highlight-box >}}Best Practices
markdown
# Gut: Einfach und klar
{{< note >}}
Wichtiger Hinweis
{{< /note >}}
# Vermeiden: Zu komplex
{{< container type="note" style="background:blue" >}}
Wichtiger Hinweis
{{< /container >}}Fazit
Shortcodes sind ein leistungsstarkes Werkzeug zur Erweiterung von Markdown-Funktionen. Sie ermöglichen es Ihnen, reichhaltige interaktive Funktionen hinzuzufügen und gleichzeitig die Lesbarkeit des Inhalts zu erhalten.