mermaid.js と mathjax.js を試す

LaTeXしてみたくてmathjaxを導入し、ついでにmermaid.jsというGraphvizの代用ライブラリを導入してみた。
実は前の記事が既に導入した状態の記事なのだが、最初Sphinxでやろうとしていたため、その時に作成した記事の転用なのだ。
Hugoでサイトを作り直すにあたり、変更しなければならないことをしたときに試したことをここに残す(技術的な事以外)。

mathjaxでLaTeX

インライン表記

アインシュタインは \( E=mc^2 \) の公式を導きました。
\(V = \frac{PY}{M}\)

This is an inline equation: \( x^2 + y^2 = z^2 \)
\( \sin(\theta) + \cos(\theta) = 1 \)

　
こういったインライン表記の場合は「\\( … \\)」の、インラインブロックのバックスラッシュを2重にしないとただのエスケープになってしまう。
インラインなら別にmathjaxのライブラリを使うようなことしないと思ったけど、いつか必要になるかもと、対応方法を調べて試した。

センター寄せしちゃう本来の？記法

\begin{eqnarray} i\hbar\frac{\partial}{\partial t}\psi(x,t)= \left(-\frac{\hbar^2}{2m}+V(x)\right)\psi(x,t) \end{eqnarray}

$$ M \times V $$

こっちはSphinxで試した時の記法と同じ

mermaid.js

SphinxではGraphvizというのを試したがHugoでやるならmermaid.jsを使うようなので設定を変えて記法も変えたりした。

graph TD
    M["貨幣供給量(M)"] --> PY["名目GDP(PY)"]
    V["貨幣流通速度(V)"] --> PY
    PY --> P["物価水準(P)"]
    PY --> Y["実質GDP(Y)"]

classDef ellipse stroke:#333,stroke-width:2,rx:10,ry:10;
    class M,PY,V,P,Y ellipse;

結構記法が違うので調べるのにちょっと苦労した。

おまけ

技術的な対応方法は別途技術メモのブログに残す予定。。 何か重要