kenban nikki    archives   tags   

HugoでMathJaxを使う

2019-03-29

このサイトはHugoで生成されているのですが、MathJaxを使えるようにする設定で少しはまったので記録に残しておきます。

はじめに

Hugoの公式ドキュメントにMathJax with Hugoという項目があったのですんなりいくかと思きや、ちょっと手こずりました。

具体的には、脚注に使われている<sup>タグが数式として解釈されてしまうのを防ぐために数式をインラインコードとコードブロック内に書くようにしたかったのにその設定が上手くいかないという問題が発生していました。

結論から言うと、以下の2つの記事を参考に設定することで解決しました。

方法

まずはMathJaxを読み込むパーシャルを作ります。CSSを切り離したいので、スタイルシートもここで読み込んでいます。

layouts/partials/mathjax_support.html

<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML">

    MathJax.Hub.Config({
        tex2jax: {
            inlineMath: [['$','$'], ['\\(','\\)']],
            displayMath: [['$$','$$']],
            processEscapes: true,
            processEnvironments: true,
            skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
            TeX: { equationNumbers: { autoNumber: "AMS" },
                extensions: ["AMSmath.js", "AMSsymbols.js"] }
        }
    });

    MathJax.Hub.Queue(function() {
        // Fix <code> tags after MathJax finishes running. This is a
        // hack to overcome a shortcoming of Markdown. Discussion at
        // https://github.com/mojombo/jekyll/issues/199
        var all = MathJax.Hub.getAllJax(), i;
        for(i = 0; i < all.length; i += 1) {
            all[i].SourceElement().parentNode.className += ' has-jax';
        }
    });

    MathJax.Hub.Config({
        // Autonumbering by mathjax
        TeX: { equationNumbers: { autoNumber: "AMS" } }
    });

</script>

<link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/{{ $.Site.Params.mathjaxStyle }}">

スタイルシートを作ります。

static/css/mathjax-style.css

code.has-jax {
    font: inherit;
    font-size: 1em;
    background: inherit;
    border: inherit;
    color: inherit;
}

テンプレートのヘッダー部分に次のコードを追加し、必要な時だけMathJaxが読み込まれるようにします。

layouts/partials/header.html

<head>
    <!-- MathJax -->
	{{ if .Params.mathjax }}
		{{ partial "mathjax_support.html" . }}
	{{ end }}
</head>

最後に設定ファイルにスタイルシートの指定を追加します。

config.toml

[params]
    mathjaxStyle = "mathjax-style.css"

おわりに

今後は記事のFront Matterで

mathjax: true

とするだけで、晴れてインラインコードとコードブロックの中でMathJaxが使えるようになります。

`$$x(l)=\int_0^l{\cos{\frac{\theta^2}{2}}d\theta}, y(l)=\int_0^l{\sin{\frac{\theta^2}{2}}d\theta}$$`

$$x(l)=\int_0^l{\cos{\frac{\theta^2}{2}}d\theta}, y(l)=\int_0^l{\sin{\frac{\theta^2}{2}}d\theta}$$

そう、こんな風にね。

related posts