文章の一部の文字色のみ変更したい

Markdownで一部だけ文字の色を変えたい場合にspanタグで直接文字色を変えるスタイルを適用しようと考えた。

ブログ記事のMarkdownのmdファイル中で

<span style="color:red">赤色になるか？</span>

と書いてみる。実際にやってみたところ、出力は、

赤色になるか？

赤色にならない！デフォルト文字色のままだ。この方法はうまくいかなかった。
出力されたhtmlのソースを見ると、

<!-- raw HTML omitted -->赤色になるか？<!-- raw HTML omitted -->

どうやらHugoのMarkdown Parserで削除されてしまうからのようだ。
Hugoのバージョンがv0.60.0からは、ブログ記事のMarkdownのmdファイルにHTMLタグを直書きした場合、ビルド時にHTMLタグで囲った箇所は安全性のために「raw HTML omitted」というコメント文に置換されてしまうようだ。

このため、調べたところ、以下のどれかの方法で対処するしかなさそう。

• 文字に色をつけるShortcodeを作る
• HTMLタグのダイレクト記述を有効にするShortcodeを作る
• config.htmlを調整してHTMLタグを有効にする

文字に色をつけるShortcodeを作る

以下のようなcolor.htmlをShortcodeで用意

layouts/shortcodes/color.html

<span style="color:{{.Get 0}}">{{.Get 1}}</span>

その上でブログ記事のMarkdownのmdファイル中で

{{< color red “赤色になるか？” >}}

とすれば　　

赤色になるか？ 　　

無事に赤色で表示できた。😄

HTMLタグのダイレクト記述を有効にするShortcodeを作る

以下のようなraw.htmlをShortcodeで用意

layouts/shortcodes/raw.html

{{.Inner}}

これは中身をそのままHTML出力する時にHugoに処理せずにスルーするように指定している。

結果としてブログ記事のMarkdownのmdファイル中で

{{< raw >}}赤色になるか？{{< /raw >}}

と書けば

無事に赤色で表示できた。😄

config.htmlを調整してhtmlタグを有効にする

いちいち個別にShortcodeを使うのが面倒な場合は、

config.toml

[markup.goldmark.renderer]
unsafe= true

で一括設定を適用すれば、Markdown ParserのGoldmarkにHTMLタグを許可するように指定可能。

https://gohugo.io/getting-started/configuration-markup/ - Configure Markup

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.

ただ、なるべく全体を一括設定より、個別に設定した方が自由度高く使えそうな気はしますね。