【Hugo】マークダウンファイルの中にHTMLコードを挿入する

Hugoのショートコードを快適に使う！

ショートコード

マークダウンファイルの中にHTMLコードを記述しても、Hugoはそれらを無視するので何も反映されません。

これを回避してHugoにHTMLコードを解釈させるには、ショートコードを使うと便利です。

 {{ .Inner }}

これだけを記述したhtml.htmlというファイルをlayouts/shortcodes/以下のディレクトリに作成しておきます。

あとはマークダウンファイルの中で、

{{< html >}}と{{< /html >}}

の間にHTMLを記述すれば、HugoはそれらをHTMLコードとして解釈してくれます。

ショートコードを入力すること自体がめんどくさい

記事装飾に使うコードもショートコードに登録しておくと便利です。

<div class="class-name">
    {{ .Inner }}
</div>

しかし、記事装飾は使用することが多いので、

{{< ショートコード名 >}}

{{< /ショートコード名 >}}

を頻繁にタイプすることになり、全然ショートになっていないじゃないかという話になります。

VS Codeのスニペット機能を使う

この問題を、高機能テキストエディタであるVS Codeのスニペット機能で解決します。

マークダウンファイルでもサジェストを有効にする

まずは、マークダウンファイルでもサジェスト機能が動作するように、設定ファイルであるsettings.jsonに下記を追記します。

"[markdown]":  {
    "editor.wordWrap": "on",
    "editor.quickSuggestions": true,
    "editor.snippetSuggestions": "top"
}

ファイル全体の{}の内側に加える形です。

ユーザースニペットを登録

ファイル　➡　ユーザー設定　➡　ユーザースニペット

「新しいスニペット ファイル」を選択します。動作する範囲をグローバルにするか特定ディレクトリに限定するかも選べます。

これで新しい設定ファイルが開くので、上記のhtmlであれば、下記のように内容を修正します。

{
	"html": {
		"scope": "markdown",
		"prefix": "html",
		"body": [
			"{{＜ html >}}",
			"",
			"{{＜ /html >}}"
		],
        "description": "html code"
	}
}

※<を半角に変えてください。

prefixに指定した文字を入力するとサジェスト機能が動くはずです。