WEBTODESIGN

Hugoの記事内でHTMLのコードを使うには?

記事内でHTMLコードを直接書き込みたいことや、iframeタグなどを埋め込みたいことがありますよね。Hugoのv0.60.0以上ではマークダウン中のHTMLタグは無視される初期設定になっているため、手動で有効にする必要があります。

config.tomlで設定する

config.tomlで設定を有効にすることで、記事内でHTMLコードが使えるようになります!config.tomlに以下の記述を付け足しましょう。

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

これで更新すれば、記事内でHTMLコードが使えるようになっているはずです!

この他にもHugoには様々なコンフィグ設定が用意されています。より詳しい説明や設定の一覧はHugoの公式ドキュメントの「Configure Markup」をご参照くださいね。

ショートコードの利用がおすすめ

マークダウンのコード内にHTMLを混合させるのは、スッキリしないこともあると思います。また、バージョン更新で無効にされたということは推奨されていない方法とも考えられます。

そこで、自分で作ったHTMLの型をマークダウンで簡単に使えるショートコードの利用がおすすめです。型を使い回せるので、とっても便利ですよ!