Markdown の Shortcodes

Shortcodes は、完全な HTML や JavaScript コードを書かずに、Markdown ドキュメントに複雑な機能を埋め込むことができる特別な構文です。

Shortcodes とは？

Shortcodes は、静的サイトジェネレータ（Hugo、Jekyll、Gatsby など）が提供する短いコードスニペットで、Markdown で事前定義された機能やコンポーネントを呼び出すことができます。

基本構文

プラットフォームによって shortcode の構文は若干異なります：

Hugo

{{< shortcode-name param1="value1" >}}

Jekyll

{% shortcode_name param1='value1' %}

Docusaurus / MDX

<ShortcodeName param1="value1" />

一般的な Shortcodes

画像とメディア

動画埋め込み

{{< youtube "dQw4w9WgXcQ" >}}
{{< vimeo "123456789" >}}

警告ボックス

{{< note >}}
これは注意情報です。
{{< /note >}}

{{< warning >}}
これは警告情報です。
{{< /warning >}}

タブ

{{< tabs >}}
{{< tab "タブ 1" >}}
タブ 1 の内容です。
{{< /tab >}}
{{< tab "タブ 2" >}}
タブ 2 の内容です。
{{< /tab >}}
{{< /tabs >}}

カスタム Shortcodes の作成

Hugo カスタム Shortcode

layouts/shortcodes/highlight-box.html：

<div class="highlight-box">
  {{ .Inner | markdownify }}
</div>

使用方法：

{{< highlight-box >}}
これは**重要な**内容です。
{{< /highlight-box >}}

ベストプラクティス

1. シンプルに保つ

# 良い：簡潔で明確
{{< note >}}
重要な注意
{{< /note >}}

# 避ける：過度に複雑
{{< container type="note" style="background:blue;padding:20px" >}}
重要な注意
{{< /container >}}

2. 明確なパラメータを提供

# 良い：明確なパラメータ名
{{< video src="video.mp4" poster="thumbnail.jpg" width="800" >}}

# 避ける：曖昧なパラメータ
{{< video "video.mp4" "thumbnail.jpg" "800" >}}

結論

Shortcodes は Markdown 機能を拡張するための強力なツールです。コンテンツの可読性を維持しながら、豊富なインタラクティブ機能を追加できます。

その他のリソース

• Hugo Shortcodes ドキュメント
• Jekyll Liquid タグ
• MDX ドキュメント