ox-hugo で mermaid.js を使う方法

はじめに このブログは、以下のワークフローで運用されています。 graph LR org-mode -- <a href="https://ox-hugo.scripter.co/">ox-hugo</a> --> markdown -- <a href="https://gohugo.io/">Hugo</a> --> HTML 上のようなフローチャートなどのダイアグラムを載せようとすると、どのような方法が思い浮かぶでしょうか? まさか、パワポ等で作ったダイアグラムを画像としてエクスポートして…なんて方法は考えていませんよね? それ、Dティアです 図1: パワポはまじでDティア それはさておき、私はダイアグラムを作る方法について詳しくなかったので、ox-hugo を使うという前提で Gemini 2.5 Pro に、Deep research してもらいました。 結果、以下のようなTier Listができました。1 表 1: ox-hugo でのダイアグラム作成方法のTier List by Gemini 2.5 Pro & me S HugoレンダーフックによるMermaid.js A Org Babel + Hugo Kroki 純粋なOrg Babel実行 (PlantUML/Ditaa) B GUIツール (Excalidraw等) で作成し、SVG/PNG画像として挿入 レガシーなHugoショートコード C iFrame埋め込み アスキーアート (ditaa, GoAT) D 🤮 M社製品 (PowerPoint, Visio)で作成+バイナリ挿入 🤮 表で示しているように、個人的にはmermaid.js を使うのがベストです。 しかし、方法がそれほどシンプルではなく、 少し面倒だったので、書き残しておきます。 ...

6月 21, 2025 · 2 分 · Kaoru Babasaki

ox-hugoのreferenceがうまく表示されない問題

問題 Org Cite Citationsを使って #+print_bibliography: でreferenceを表示しようとしたが、“References"というヘッダのみが表示され、referenceのリストが表示されなかった。 content/ の中のmdファイルを見ると、htmlとして、referenceのリストが書き出されていたが、 public/ の中のhtmlファイルを見ると、referenceのリストが表示されていなかった。 よって、 org -> md -> html という変換の md -> html の部分で問題があると考え、調べてみると、同じ問題についてのissueが立っており、以下の解決策にたどり着いた。 解決策 config.tomlに [markup.goldmark.renderer] unsafe = true を追加することで解決できる 自分の場合はymlを使っていたので、以下のように設定した。 markup: goldmark: renderer: unsafe: true 解説 Goldmark — ox-hugo - Org to Hugo exporter で書かれているように、 Hugo v0.60.0以降、デフォルトのMarkdownパーサーはCommonMark準拠のGoldmarkに変更された。 以前のデフォルトパーサーであるBlackfridayは、仕様に準拠しておらず、多くのバグを抱えていたらしく、ox-hugoを使い続ける場合は、特別な理由がない限り、Goldmarkに移行することが推奨されている。 ただし、Goldmark/Hugoには、Blackfridayと比較してMarkdownのパース方法にいくつかの問題があり、 その一つが、今回の問題である、インラインHTMLがうまく表示されないというものっぽい。 この解決策によって、Markdown内でインラインHTML を使用できるようになるということらしい。

11月 12, 2024 · 1 分 · Kaoru Babasaki