Web上で綺麗な数式を記述できるMathjax.jsプラグインの使い方

Webページに簡単に数式を載せることができるMathjax.jsの紹介です。ここでは紹介しきれないほどの多機能なので一度ドキュメントを読んでみるといいかもしれません。

CDNから読み込み


<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  // Latexみたいに$...$で囲めばインラインになるようにする
  tex2jax: {
    inlineMath: [['$', '$'], ["\\(", "\\)"]],
    processEscapes: true
  }
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS_SVG" async></script>

MathJax.Hub.Config で色々な設定をすることができます。Mathjax.jsの読み込みの際、?config= のあとにあらかじめ用意された設定ファイルを指定できます。ここでは、SVGで出力するようにしています。

数式の表示


$$
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$

$$ で囲むとブロック要素、$ で囲むとインライン要素になります。基本的にはLatexの記法と同じですが、一部使えない機能もあるようです。

ローディング中を非表示


<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  messageStyle: 'none'
});
</script>

ブラウザの左下に表示される読み込み中のパーセンテージを非表示にします。

ディスプレイ数式を左寄せに


<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  displayAlign: "left"
});
</script>

数式の色を変更


<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  messageStyle: 'none',
  tex2jax: {
    inlineMath: [['$', '$'], ["\\(", "\\)"]],
    processEscapes: true
  },
  TeX: {
    extensions: ['color.js']
  }
});
</script>

設定でcolor.jsを読み込んでおきます。


$$
x = \frac{ \color[RGB]{30,120,200}-b \color[RGB]{0,0,0} \pm \sqrt{b^2 - 4ac}}{2a}
$$

\color[RGB]{*,*,*} と指定します。再び黒色に戻すときは、\color[RGB]{0,0,0} のようにすれば戻すことができます。

何度も同じ色を指定する場合


$$
\definecolor{tomato}{RGB}{210,36,38}
x = \frac{ \color{tomato}-b \color[RGB]{0,0,0} \pm \sqrt{b^2 - 4ac}}{2a}
$$

\definecolor で色を定義できます。

一部ページにのみ読み込ませる


$$
\require{color}
x = \frac{ \color[RGB]{30,120,200}-b \color[RGB]{0,0,0} \pm \sqrt{b^2 - 4ac}}{2a}
$$

MathJax.Hub.Config に記述すると全ページでcolor.jsが読み込まれてしまうので、必要なページにのみ読み込ませたい場合はこのように \require{color} すると良いです。

レスポンシブに対応させる


<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [['$', '$'], ["\\(", "\\)"]],
    processEscapes: true
  },
  linebreaks: {
    automatic: true  // はみ出す場合は改行する
  }
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS_SVG" async></script>
<script>

var delay;
window.addEventListener('resize', function() {
  clearTimeout(delay);
  
  delay = setTimeout(function() {
    MathJax.Hub.Queue(['Rerender', MathJax.Hub]);
  }, 100);
});

</script>

ウィンドウ幅が小さくなっても改行させて表示するようにします。改行させたくない場合は overflow-x: auto; で横スクロールさせる方法もあります。