いっしきまさひこBLOG

AI・機械学習関連、Web制作関連、プログラミング関連、旅行記録などなど。一色政彦。

お勧めのMathJax設定方法(構成や日本語表示など)

いろんなところで数式レンダリングにMathJaxを使っています。最近v3を使ってみたのですが、表示が壊れるケースが多く、またv2の最新版に戻しました。

自分のためにも日本語表示方法など調べて対応したので備忘録として知見をまとめておきます。

v3を使ったときに日本語にメイリオ(Windows)を使ってみる例。ローカルで使っていたので汎用的な書き方ではないと思います。

<script>
MathJax = {
  tex: {
    inlineMath: [
      ['$', '$'],
      ['\\(', '\\)']
    ],
    displayMath: [
      ['$$', '$$'],
      ['\\[', '\\]']
    ]
  },
  options: {
    skipHtmlTags: ["script", "noscript", "style", "textarea", "pre", "code"]
  }
};
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
</script>
<style>
mjx-container mjx-utext { font-family: Meiryo !important; }
mjx-container svg text { font-family: Meiryo !important; }
mjx-container[display="true"] { margin: 0 !important; padding: 2px 0 4px 0 !important; }
mjx-mid mjx-c::before { padding-top: 0.13em !important; }
</style>

次にv2に戻したときに書いた例。

<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS_HTML-full'>
  MathJax.Hub.Config({
    "fast-preview": {disabled:true},
    tex2jax: {
      preview: "none",
      inlineMath: [['$','$'],['\\(','\\)']],
      displayMath: [['$$','$$'],['\\[','\\]']],
      skipTags: ["script", "noscript", "style", "textarea", "pre", "code"],
      processEscapes: true
    },
    "HTML-CSS": {
      undefinedFamily: "Meiryo, STIXGeneral, 'Arial Unicode MS', serif"
    }
  });
</script>

ちなみに、config=[入力形式_出力形式]で定義できます。

  • TeX-AMS_HTML:
    • TeX-AMS:数学の入力にTeX/LaTeX書式のみを使用する(※MathML書式は使わない)。なお「TeX-AMS」とは「AMS(American Mathematical Society:アメリカ数学会)」が開発したTex書式であること示す
    • HTML: HTML&CSSによる出力のみを行う(※MML出力は行わない)
  • ファイル名のサフィックス「-full」は、「完全版」フレーバーであること(※「標準版」フレーバーではない)を示す。「完全版」だと、数学レンダリングに必要なものはすべて事前にロードされる。そのためロード後の数式表示に遅延が発生しない

MathJaxはロードが遅いから(※もっと最適化する方法はあるのかなと思うけど時間的に調べ切れていません)、KaTeXに移行した方がいいのかもだけど、機能面とかどうなんだろうとか思って手をまだ出せていません。

はてなブログのMarkdownにも以下のような数式を書く書式があるけど、通常は$を使って書いてるから面倒くさいですね。

[tex:数式]

取りあえず以下のように書いてみていますが、この書き方で取りあえず問題はあまり出なさそうです。

【ブロックの場合】

<div>
$$
\begin{align}
y=x^{2} \cdots 数式1 \\
y=x^{3} \cdots 数式2
\end{align}
$$
</div>
$$ \begin{align} y=x^{2} \cdots 数式1 \\ y=x^{3} \cdots 数式2 \end{align} $$

【インラインの場合】

数式「<span>$y=x^{2}$</span>」をインラインで書く。

数式「$y=x^{2}$」をインラインで書く。

上記の通りで数式が反映されているのではないかと。