冷めたコーヒー

Weniger, aber besser

MathJaxの導入による数式の表示(はてなブログ)

はじめに

本記事では,数式を Web ブラウザ上で表示させるために必要となる MathJax の導入および使用例について述べる.MathJax そのものの説明はせず,あくまでどのように記述すればよいかに焦点を絞る.

  • 注意:以下では Markdown 形式での投稿を前提で話を進める.

導入手順

「管理画面」→「デザイン」→「カスタマイズ」→「ヘッダ」→「タイトル下」の順にページを推移して、以下のスクリプトを記述する.

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [['$','$'], ['\\(','\\)']],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
    }
  });
</script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML' async>
</script>

上記のスクリプトの config の部分で,LaTeX のようにドルマーク($)が使えるようになっている(本来は,\( a+b \)のように記述する必要がある).なので,基本的には LaTeX と同様の記述をすれば OK ですが,多少注意が必要.

記述例

行中(インライン)での表示

行中に数式を挿入したい場合,数式をドルマーク($)で囲む.

  • $x_1 + x_2$ : $x_1 + x_2$
  • $x^1 + y^1 = z^1$ : $x1 + y1 = z1$ (←失敗例)
  • $x^ 2 + y^ 2 = z^ 2$ : $x^ 2 + y^ 2 = z^ 2$
  • $x^{3} + y^{3} = z^{3}$ : $x^{3} + y^{3} = z^{3}$
  • $e^{i\pi} + 1 = 0$ : $e^{i\pi} + 1 = 0$

指数の記述の仕方だが,ハットマーク(^)の直後にスペース()を入れるか,中括弧({})で指数部分を囲む必要があるようで,x^1のような書き方をすると正しく表示されない.

中央での表示

数式を中央に表示(独立して表示)する場合,ドルマークを2つ用いて次のように記述する.下記コードにおいて,ドルマークの部分で改行を行っているのは見やすさのためであり,特に改行を行う必要はない.

$$
f(a) = \frac{1}{2\pi i} \oint_\gamma \frac{f(z)}{z - a}\,\mathrm{d}z
$$

$$ f(a) = \frac{1}{2\pi i} \oint_\gamma \frac{f(z)}{z - a}\,\mathrm{d}z $$

数式中で改行をしたい場合は次のように記述する.Markdown 形式で書く場合,バックスラッシュ(\)が通常の2つではなく,4つ必要なことに注意が必要.

$$
\begin{align}
a &= b \\\\
&= c
\end{align}
$$

$$ \begin{align} a &= b \\ &= c \end{align} $$

式番号を表示させたい場合は次のように\tag{}というコードによって実現可能.一応,自動で振ってくれるようにもできるのだが,個人的にその後で参照しない数式に番号を振るのはあまり好きではないので割愛.

$$
\begin{align}
a 
&= b \tag{1} \\\\
&= c \tag{2}
\end{align}
$$

$$ \begin{align} a &= b \tag{1 }\\ &= c \tag{2} \end{align} $$

おわりに

ひとまずこれくらい知っていれば困らないだろう,という程度です.今後,使ってみて困ったことやハマってしまったことなどがあれば追記していきたいと思う.

参考記事