1. HUGO上のAsciidcotorで数式を表現する方法
私はブログをAsciidoctorを使用して書いていますが、ふと数式を表現したくなりました。
Asciidoctorには数式を表現する機能があるので簡単に実現できるとおもっていたのですがそれは甘い考えでした。
いろいろと調べて工夫してHUGO上のAsciidoctorで数式を表現できるようになりました。
今回はこの私の対応方法を共有します。
2. 対応方法
下記の流れ対応できます。
-
/layouts/partial/mathjax.html を作成
-
/layouts/_default/single.htmlで上記テンプレートを呼び出す
2.1. /layouts/partial/mathjax.html を作成
/layouts/partial/mathjax.htmlを作成します。
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
messageStyle: "none",
tex2jax: {
inlineMath: [["\\(", "\\)"]],
displayMath: [["\\[", "\\]"]],
ignoreClass: "nostem|nolatexmath"
},
asciimath2jax: {
delimiters: [["\\$", "\\$"]],
ignoreClass: "nostem|noasciimath"
},
TeX: { equationNumbers: { autoNumber: "none" } }
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.6.0/MathJax.js?config=TeX-MML-AM_HTMLorMML"></script>2.2. /layouts/_default/single.htmlで上記テンプレートを呼び出す
single.htmlに下記を追加します。
{{- partial "mathjax.html" . -}}3. 対応方法についての補足説明
以上で対応方法については完了で数式を表現できるようになっています。
以降では対応方法について補足します。
3.1. HUGOのAsciidoctorの動作
HUGOのAsciidoctorは「External Helpers」という仕組みで実現しています。
具体的には下記のように実行されます。
asciidoctor: --no-header-footer --safe --trace -
上記のオプション指定によりAsciidoctorのCSSなどデザイン関連の情報が出力に含まれなくなります。結果としてデザインがおかしくなり、数式表現やコードのハイライト機能などが実現できなくなります。
このような状況については下記記事でも少し触れています。
3.2. Asciidoctorの数式表現の仕組み
Asciidoctorの数式表現は「/layouts/partial/mathjax.html」に追加したようなスクリプトをドキュメントに追加することで実現しています。
具体的にはAttributeに:stem:を指定すると上記のスクリプトがドキュメントに追加されます。
このような状況については下記記事で触れています。
4. まとめ
HUGO上のAsciidoctorで数式を表現する方法をご紹介しました。
HUGO上のAsciidoctorについてはユーザがそれほど多くないのか情報量が少ないような気がします。
今後も調べた情報などを更新していきます。
今回は以上です。