panda大学習帳外伝

素材の味を活かしたリール動画。

GitHub PagesでMathJax3を使って数式をレンダリングしてみた。

最終更新日: Thu Aug 11 11:29:15 2022 +0900

はじめに

WordPressでMathJax3のための設定ができたところで、GitHub PagesでもMathJax3を使って数式をレンダリングするための設定に挑むことにしました。

サクサクと設定

設定の方針

本Webサイトでは、_layouts/default.htmlのheadタグの中に

{% include mathjax.html %}

というinclude文を仕込んでおいて、MathJaxのための設定は_includes/mathjax.htmlという名前のHTMLファイルに切り出してあります。

そこで、_includes/mathjax.htmlにもともと設定されているMathJax2のための設定をMathjax3のための設定に書き換えます。

設定の書き換え

_include/mathjax.htmlの設定を以下のように書き換えます。

<script>
MathJax = {
	loader: {
		load: ['[tex]/color']
	},
	chtml: {
		displayAlign: "left",
		displayIndent: "2em",
		matchFontHeight: false
	},
	tex: {
		packages: {'[+]': ['color']},
		tags: 'ams',
		inlineMath: [['$','$'], ['\\(','\\)']],
		processEscapes: true
	}
}
</script>
<script id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>

WordPressではchtmlの設定としてscaleを1以上の値に設定していました(こちら参照。)が、GitHub Pagesの表示では数式中の文字が重なる等の理由で読みにくい場所がなかったことから特に設定していません。

また、数式に表示色を指定するために必要な設定(colorパッケージを読み込むための設定です。)を追加しています。

動作確認

動作確認はいつものガウス積分で行います。

\begin{align} \int_{-\infty}^{\infty} {\color[rgb]{0.7921,0.3098,0.2353} e^{-x^2}} dx &= \sqrt{\pi} \label{eq:gaussint} \end{align}

なお、${\color[rgb]{0.7921,0.3098,0.2353} e^{-x^2}}$の部分だけ国鉄制定色の朱色5号としています。

colorパッケージも動作していることが確認できます。

まとめ

MathJax2からMathJax3の間では設定用のパラメータの名前が大きく変更されてはいるものの、それらの対応関係がわかれば、レンダリングの対象となる数式自体には手を入れる必要はなかったので、プラグイン及び関連するタグの除去が必要だったWordPressでの置き換え作業と比較すると楽に作業することができました。

この記事は以上です。

リンク