[Sy] MathJax を使って LaTeX 形式の数式をブラウザ上できれいに表示

2018/02/07

LaTeX で書かれた数式をブラウザ上で表示してくれる JavaScript のライブラリ MathJax をインストールして簡単なサンプルを作ります。

1. MathJax をインストール

適当な作業ディレクトリを作って、

$ mkdir hello-mathjax
$ cd hello-mathjax

yarn （または npm）を使って MathJax をインストールします。

$ yarn add mathjax
yarn add v1.3.2
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
└─ mathjax@2.7.2
✨  Done in 4.12s.

2. index.html を作成

index.html を作成し、数式を埋め込みます。

<html>
<head>
  <meta charset="UTF-8">
  <title>はじめてのMathJax</title>
  <script src="./node_modules/mathjax/MathJax.js?config=TeX-MML-AM_CHTML"></script>
</head>

<body>
  <h1>三角形の面積</h1>

  <p>（a：底辺, h：高さ, s：面積）</p>

  \begin{align}
    s = \frac{ah}{2}
  \end{align}

</body>
</html>

scriptタグで、 MathJax.js を読み込んでいます。 configパラメータは、色々と用意されているものを使ったり、独自で作り込んだりできるみたいです。

これでサンプルは完成です。

3. index.html をブラウザで表示

動作確認をしてみます。

ブラウザで index.html を開くと、以下のように数式がきれいに表示されているのが確認できます。