MathJaxを使って数式をWebページに表示する

カラフルな数式パーカートレーナーフーデッドアスレチックスウェット3Dプリントガールズボーイズメンズ（ヘルスファブリック）

前回の記事で数式を載せてみたんですが、このブログでOctopressの中で使えるようにした方法について。

MathJax
Kramdownでの運用
Octopress/Jekyllでの運用
Jekyll Spaceship

MathJax

MathJaxはJavaScriptを使って HTMLページ内のLaTeXのような記述方法で書かれた数式部分をCommonHTMLまたはSVG形式で表示してくれるツールです。

使い方は

<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-mml-chtml.js"></script>

の2つを読み込んでおいて、ページ内で$/$で囲った部分が文中表示で数式に変換され、 $$/$$または\[/\]で囲った部分が独立した行として数式に変換されます ¹。

LaTeX的な$で囲った部分を文中数式にするには

<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']]
  }
};
</script>

と言った設定を書いておくことで有効になります。

ミニマムな例は以下のJS Binで見てみることが出来ます。

JS Bin - Collaborative JavaScript Debugging

Kramdownでの運用

Kramdownで使う際には記号の変換が入るので少し注意が必要です。

Syntax, Math Blocks: kramdown

にあるようにKramdownはMathJaxをサポートしているとのことですが、実際にKramdownで行っていることは$などの記号を良しなに変形することを行っているだけです。

それらを見越してMarkdownを書いて、さらに上のスクリプト2行を加えればきれいな数式のウェブページを作ってくれます。

ですが、これがちょっとよくわからない変換になっていて

$~$ : そのまま。(MathJaxのデフォルトだと何もしない)
$$~$$: 独立行だと\[~\]に変換。文中にあると$~$に変換。
- MathJaxを通すと独立の場合は独立行に、文中だと文中数式に。
\$$~$$: 独立行だと$~$、文中だと$$~$$に。
- MathJaxを通すと独立行は文中式に、文中だと独立行に。
\$\$~$$: $$~$$に。独立行数式に。
\$$~\$$: 独立行だと$~\$、文中だと$$~$$。
\$\$~\$\$: $$~$$に。
$~$: \が消える(MathJaxには通らない)。
\[~\]: \が消える(MathJaxには通らない)。

といった変換になっています。 (Kramdown 2.4.0でgemで入れたものを使って$ kramdown test.mdのように直接変換してテスト。)

上のドキュメントでは\$$~$$は文中数式になる、とのことなんですが、確かにそれだけ1行に書いておけば、独立行数式のように中寄せされずに通常分扱いで左端からはじまりますが、実際に文中に入れ込むと$$~$$に変換されてしまい予期せぬ改行になってしまいます。

また、\$\$~\$\$はそのままそれを出力するとのことですが、そうはならず MathJaxで変換される状態になってしまいます。

という状態なので、基本的に独立行数式でも文中数式でも$$~$$で書いておけば KramdownがMathJax用に変換してくれるということがわかります。

test

$$x_1$$

test

XXX $$x_2$$ XXX

とすれば、

test

\[x_1\]

test

XXX $x_2$ XXX

といった感じに表示されます。

逆にそれ以外の記号は変なくせがあるので使わないほうが良さそうです。

また、 $~$ を変換するようにMathJaxのオプションを追加する事もできますが、 $記号が同一文中に2つ出てくることは普通の文でもありえるので避けておいた方が良いです。

Octopress/Jekyllでの運用

簡単には適当にテンプレートのhead部分とかに

<head>
...
<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-mml-chtml.js"></script>
...
</head>

を加えておけばすべてのページで読み込ますことが出来ます。

ただ、ほとんどのページで使わない場合には無駄なので、例えばpageというレイアウトを記事のテンプレートとして使う場合、 headのテンプレート部分で、

{% if page.math %}
<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-mml-chtml.js"></script>
{% endif %}}

としておいて、記事のMarkdownファイルの戦闘に書くYAML部分で、

---
title: "MathJax test"
...
math: true
---

とmathを有効にしてあげればその記事だけに上のスクリプトが読み込ませることが出来ます。

Jekyll Spaceship

Jekyll SpaceshipはJekyll用のプラグインで様々な変形をひとまとめに管理して有効に出来るツールです。

この中に mathjax-processorというものがあり、 Octopress/Jekyllの設定ファイルである_config.ymlの中で

plugins:
  - jekyll-spaceship

jekyll-spaceship:
  processors:
    - mathjax-processor

のようにプラグインを読み込むと $~$ のような文字列が文章中にあれば自動で上のスクリプトを読み込むようにHTMLに書き込んでくれます。

mathjax-processorではデフォルトで、

jekyll-spaceship:
  processors:
    - mathjax-processor
  mathjax-processor:
    src:
      - https://polyfill.io/v3/polyfill.min.js?features=es6
      - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
    config:
      tex:
        inlineMath:
          - ['$','$']
          - ['\(','\)']
        displayMath:
          - ['$$','$$']
          - ['\[','\]']

といった設定になっていて、MathJaxのデフォルト値とは違い、 $~$ もMathJaxで変換するようになっています。

これを入れるとKramdownの変形とは違い、

$~$ : そのまま。
$$~$$: そのまま。
\$$~$$: そのまま。
\$\$~$$: $$~$$に。
\$$~\$$: \$$~$$に。
\$\$~\$\$: $$~$$に。
$~$: \が消える(MathJaxには通らない)。
\[~\]: \が消える(MathJaxには通らない)。

で、何故かKramdownだと変化をさせないコードブロック中の$$を\$\$に変更してしまうことがあります。 $1つだとエスケープはつきません。

上の様にKramdownの変更とはちょっと変更になっていて、texに指定した記号に関して処理を施しているようで、それがコードブロックまでちょっと悪さをしている模様。

$$を下手に変換させないために

    config:
      tex:
        inlineMath:
          - ['\(','\)']
        displayMath:
          - ['\[','\]']

としてみると、コードブロック内の$$は変換されなくなります。

また、$$~$$の部分は、もとのKramdownと同じ様に変換され、出力としてMathJaxが読めるようになるので結果的に数式に変換されます。

また、$$~$$の記号だけがあってもMathJaxのスクリプトを読み込む設定がHTMLに書き込まれます。

ただ、これは直感に合わないので、おそらく予期してないものだと思います。

このプラグインはKramdown用、というわけではなく、 Kramdownでやっている$関連の処理はMarkdownの基本的な処理にはないものなのでこの部分がconflictしてしまっているのかと。

なので、Kramdownを使っている場合にはそういう物だと思って、 config.texに関しては上の様に設定し、独立行でも文中数式でも $$~$$を使っておけば上のmathオプションを使ったときと同じ様に出来るように見えます。

ちょっと完全に副作用がないかは確認できてないのと、数式を書くことはそれほどないと思うので、今は一旦mathオプションを使った方法でやっていこうと思ってます。

Jekyll Spaceshipには数式以外にも、テーブルのcolumnをまとめて表示できる機能や、PlantUML/Mermaidといった図の表示などもあって1つのプラグイン入れるだけで使えるのは便利だな、とは思うので、また必要そうなら試してみようと思います。