Texによる数式表現38～MathJaxの表示トラブル解決法

　前回のKaTeXの表示トラブルの解決に続き、今回はMathJaxの表示トラブルに解決法について紹介する。前回と同様にMathJaxのJavascriptライブラリの読み込み先をjsDelivrからCloudflareに変更することで数式表示できるようになる。

atatat.hatenablog.com

MathJaxの公式サイト（これもChromeだとプライバシーエラーになる）ではJavascriptライブラリの接続先はjsDelivrで <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>としているがCloudflare <script id="MathJax-script" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.1.0/es5/tex-chtml-full.min.js">に変更する。

なお<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>では3系であればバージョンが上がっても追随できるが、Cloudflareは特定のバージョンを指定するため、バージョンが上がって使用したい場合は、都度Javascriptライブラリの読み込みに反映させる必要がある。

全体的には以下のコードを記述することでMathJax3.1.0が利用できる。

<script>
MathJax = {
  loader: {load: ['[tex]/physics']},
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']],
    packages: {'[+]': ['physics']}
  },
  chtml: {
    matchFontHeight: false
  }
};
</script>
<script id="MathJax-script" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.1.0/es5/tex-chtml-full.min.js">
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
</script>

MathJaxが利用できているかどうか、いくつかのMathJax特有のコマンドのテスト表示を以下に示す。注：HOMEやTOPページで複数ページ表示された状態では、他ページで設定したscript同士(KaTeXなど)が干渉してうまく認識できないコマンドがある模様。1記事のみ個別のページとしてロードすれば正しく表示される

括弧コマンド：

$\qty\big(a)$

$\qty\big(a)$

括弧式コマンド：

$\comm\Big{A}{B}$

$\comm\Big{A}{B}$

ベクトル表記：

${\bf{\vec{a}}}\cdot{\bf{\vec{b}}}=|a||b|\cos (\theta)$

${\bf{\vec{a}}}\cdot{\bf{\vec{b}}}=|a||b|\cos (\theta)$

偏微分コマンド：

$\pdv{f(x,y)}{x}{y}$

$\pdv{f(x,y)}{x}{y}$

化学式(mhchem)：

$\ce{ H2O} $

$\ce{ H2O} $

ブラ・ケットコマンド：

$\expval{A}{\Psi}$

$\expval{A}{\Psi}$

行列表示：

<div>$\mqty(\dmat{1,&\ddots, n & 3 \\ 4 & 5})$</div>

$\mqty(\dmat{1,&\ddots, n & 3 \\ 4 & 5})$

数式装飾：

$\bbox[cyan, 2px, border: 2px solid red]{x+1}$

$\bbox[cyan, 2px, border: 2px solid red]{x+1}$

過去記事のリライトに関しては行わずしばらく様子見（証明書エラーであれば解決すれば、特に何もしなくても表示できるようになる）の予定で、ただ前回と今回の記事のリンクを追加する程度のことはしようと思う。

今回cdnjsやMathJaxのサイトがプライバシーエラーで接続できない(thisisunsafeで突破できるが)ことや、jsDelivrのJavascriptライブラリが接続できないなど結構大問題になっているはずだが、検索した限りだとあまり話題になっていないようだ。

つれづれなる備忘録

日々の発見をあるがままに綴る

Texによる数式表現38～MathJaxの表示トラブル解決法