My External Storage

Mar 10, 2020 - 3 minute read - Comments - hugo

Hugo v0.60以上を使うと、Markdown中のHTMLタグが「raw HTML omitted」となって消えてしまう

2020/03/07時点で最新のHugo v0.66.0でhugoコマンドを使ってMarkdownファイルからHTMLを生成した。
すると、Markdown中に含まれていたHTMLタグがすべて<!-- raw HTML omitted -->と出力され消えるようになってしまった。
結論から言うと、Hugo v0.60.0からは設定で明示的に「HTMLタグをそのまま出力する」オプションを設定する必要があった。

TL;DR

  • Hugoを最新版のv0.66.0にしたらMarkdown文書中のHTMLタグが出力されなくなってしまった
    • 生成後のHTMLファイルをみると、<!-- raw HTML omitted -->になっていた。
  • Hugo v0.60.0から利用されているGoldmarkというMarkdown Parserのデフォルト設定はHTMLタグを出力しない
  • Markdown中のHTMLタグを出力するには、config.tomlなどでunsafeオプションをtrueにする必要がある
[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

記事で利用しているHugoのバージョンは次の通り。

$ hugo version
Hugo Static Site Generator v0.66.0/extended darwin/amd64 BuildDate: unknown

Markdown中のHTMLタグが出力されなくなった。

このブログはHugoという静的サイトジェネレータを使って構築されている。
HugoはMarkdownでWebページを記述することができる。
私のブログ記事ではAmazonへのリンクや次のようなリッチなリンクを生成するため、Markdown記事内に<div>タグや<iframe>タグが書いていた。

(ちなみにこのようなリンクはiframelyというサービスで生成している。)

すこし気になるところがあったので、brew upgrade hugoコマンドでhugoコマンドを2020/03/07時点最新のv0.66.0にした。
その結果、ブログ記事となるMarkdown内にそのまま書いていたHTMLタグがサイトに公開するHTMLから消えてしまった。

生成されたHTMLを見ると、<div>タグや<iframe>タグが書いていたところがすべて以下のようになっていた。

<p>そして、<code>claat</code>はGoogleが提供している公式ツールだ。<code>claat</code>を使うとGoogle DocからこのCodelabs形式のチュートリアル・ハンズオンを簡単に作成することができる。</p>
-
- <p><div class="iframely-embed"><div class="iframely-responsive" style="height: 168px; padding-bottom: 0;"><a href="https://github.com/googlecodelabs/tools" data-iframely-url="//cdn.-iframe.ly/fSusqIF"></a></div></div><script async src="//cdn.iframe.ly/embed.js" charset="utf-8"></script></p>
-
+ <!-- raw HTML omitted -->

Hugo v0.60.0からMarkdown中のHTMLタグがオミットされるようになった

調べてみたところ、Hugo自体の設定が変わったらしい。
Hugo v0.60.0から新しく採用されたGoldmarkというMarkdownパーサーはデフォルト設定でMarkdonw中のHTMLタグを無視する。

Goldmark is from Hugo 0.60 the default library used for Markdown.

unsafe By default, Goldmark does not render raw HTMLs and potentially dangerous links. If you have lots of inline HTML and/or JavaScript, you may need to turn this on.

なので、このunsafeオプションをtrueにすることで、再びMarkdown内のHTMLタグがHugoで生成された記事内でも表示されるようになった。
私の場合はconfig.tomlファイルに設定を書いていたので、以下のような設定を追加した。

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

終わりに

新しい機能を追加するとき、デフォルト設定は挙動が変わらない方向にしておかないと、アップデートしたユーザーが困ったり、びっくりしたりするという教訓を得た。

参考

関連記事