Markdownの画像表示の拡張

Markdownの画像表示 ![alt](<url>) は限りなくシンプルで、alt属性以外を変えようとする場合は、直接HTMLタグを書く、というのがセオリーとなっている。例えば画像サイズなんかはすぐに調整したくなるパラメーターの1つだと思うけど、Markdownではサポートされていないため、<image> タグか、sytle 属性に直接 width と height を指定する¹。

Markdownのシンプルな思想は素敵だが、このように実用では機能が足りないので、各種サービスは独自に拡張するか、別の記法を導入している。

Obsidian

Obsidianはファイル埋め込みが画像も対応しており、画像サイズなども指定できる²。Wikiの記法を参考にしたと明記されている³。

![[Engelbart.jpg|100x145]]

Zettlr

ZettlrはいくつかのMarkdown方言に対応している⁴。例えば、pandocの記法を流用して画像サイズを指定することが可能⁵。

![alt](file.jpg){ width=50% }

Hugo

Hugoは figure というShortcodeを標準で用意している⁶。

{{< figure
  src="/images/examples/zion-national-park.jpg"
  alt="A photograph of Zion National Park"
  link="https://www.nps.gov/zion/index.htm"
  caption="Zion National Park"
  class="ma0 w-75"
>}}

classにはおそらくTachyonsの記法を設定している。ma0はmargin 0、w-75はwidth 75%ってことかな。

当サイトはimageという独自のShortcodeを使っている。昨日、Shortcodeと脚注を組み合わせるメモを書いたのは、画像のキャプションに脚注を付けたくなることが多いための対応だった。

知人に共有するため、Githubに上げた。

GitHub - disktnk/hugo-shortcode-image

Contribute to disktnk/hugo-shortcode-image development by creating an account on GitHub.

 github.com