hugoとマークダウンで、画像を追加するのにてこずったので、適当に備忘録として残してみる。

注意

間違いの可能性 （2025年1月26日追記）

　この記事は（というか今もそうかもだけど）作成当時とりあえず動くということを基準に Hugo をよくわかってなくて手探りで使ってたことやあんまりよくない方法を書いているので、かなり間違ったことを書いている可能性があります。

　ということで、別の記事に現状のやっていることをまとめなおすことにしました。

hugoで画像を追加する 📷の補足

てこずったところ

　マークダウン標準で画像は表示できるが、大きさを調整したり、スタイルを設定できない。

![altText](imagePathFromStaticFolder)

非推奨

自分が解決とした方法

　マークダウンにHTMLを書き、hugoのconfigに以下の設定を追加する。

<div style="display:flex; justify-content:center; margin:10px; ">
    <img style="margin:10px;" src="/imagePathFromStaticFolder" alt="追跡可能" width="200" />
</div>

markup:
  goldmark:
    renderer: 
      unsafe: true

動作の様子

完成形

もっとよさそうな方法

　hugo 内蔵の画像表示機能を使う。

  • 追記（2025年1月26日）
    　Hugo 自体にはそんなものない。 hugo の shortcode というのを使って、自分で画像を表示するコードを書くか、テーマごとに用意された画像を表示するための shortcode を使うことはできる。また、マークダウン形式でも画像を張り付けられるが、細かいスタイルの調整はできなかったと思う。
    hugoで画像を追加する 📷の補足

  • 追記 (2025年1月30日)
    　今気づいたが、実は組み込みで、hugoに figure っていうのが入っていることに気づいた。「hugo自体に画像を表示する機能がない」というのは間違いで、気づけてないだけだった。
    Figure | Hugo

分かった事

　hugoには複数のマークダウンエンジンを使うことができ、自分が調べた当時では、デフォルトで goldmark というレンダリングエンジンが使われている。

　また少なくとも、hugoで使われている goldmark の設定では、HTML要素を描画することは危険ということで、デフォルトでマークダウン中にHTMLが書いてあっても描画しないようになっていた。

　よって、マークダウン中のHTMLをhugoとマークダウンの組み合わせでは、マークダウン中のHTMLを表示したいなら、HTML要素を描画することを、hugo.toml等の設定ファイルで明示的に指定する必要がある。

事の発端

　マークダウン形式で画像を追加すると大きすぎてしまう。

![altText](imagePathFromStaticFolder)

　html形式で書いてみると、全然見えない。

<div style="display:flex; justify-content:center; margin:10px; ">
    <img style="margin:10px;" src="/imagePathFromStaticFolder" alt="追跡可能" width="200" />
</div>

調べたこと

マークダウンで何とかする方法

　マークダウンでは以下の様にサイズが調整できるらしいが、うまくいかなかった。

![altText]{width:200}(imagePathFromStaticFolder)

非推奨

マークダウンにHTMLを直接記入

　hugoのセーフティーを外し html を直接マークダウンに書けるらしいと分かった。

<div style="display:flex; justify-content:center; margin:10px; ">
    <img style="margin:10px;" src="/imagePathFromStaticFolder" alt="追跡可能" width="200" />
</div>

markup:
  goldmark:
    renderer: 
      unsafe: true

マークダウンレンダーエンジン

マークダウンを描画するのにも、複数のエンジンがあることが分かった。 設定次第で、うまくマークダウンを表示できなかったりするらしい。

参考にしたサイト