ことれいのもり

MathJaxを使ってWebページにLatex形式を簡単に表示する方法

2025-09-04

はじめに

ブログや技術記事を書いていると、数式を綺麗に表示したい場面はありませんか？

Latex形式を使えば、分数や累乗なども見やすく表現できます。


例えば、次のように書けます。


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


この記事では、JavaScriptのライブラリである、MathJaxを導入して簡単にLatex形式の数式を表示できる方法を紹介します。

MathJaxとは？

MathJaxとは、WebページにLatex形式の数式を埋め込めるためのJavaScriptライブラリです。

普通のテキストでは分数や累乗を表現しにくいですが、このライブラリを導入するだけで、複雑な計算式も美しく表示できます。

今回は、CDNを使った読み込み方法を紹介します。

導入方法

導入方法はとても簡単です。

あなたのプロジェクトのheaderかfooterに以下のscriptタグを追加するだけです。

<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>


この状態で、Latex形式の数式を $記号で囲むことで書くことができます。

さきほどの例だと、


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


と書くと、MathJaxが自動的に認識して次のように表示されます。


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


Latex形式の詳しい書き方はこの記事では割愛します。

参考として、以下の記事が役立ちますのでぜひチェックしてみてください。

mathjax(LaTeX記法)による数学記号の書き方

細かい設定を追加したい場合

MathJaxでは、数式の書き方や表示方法を細かくカスタマイズすることができます。

例えば、次のように、window.MathJaxと定義することで、数式の区切りや出力形式を指定できます。

<script>
  window.MathJax = {
    tex: {
      inlineMath: [
        ['$', '$'],
        ['\\(', '\\)']
      ],
      displayMath: [
        ['$$', '$$'],
        ['\\[', '\\]']
      ]
    },
    svg: {
      fontCache: 'global'
    }
  };
</script>

tex.inlineMath

インライン数式（改行なしで表示される数式）として認識する記号を指定できます。

inlineMath: [
    ['$', '$'],
    ['\\(', '\\)']
]


これにより、

$...$
\(...\)

の間の数式をLatexとして認識させることができます。

tex.displayMath

ディスプレイ数式（改行ありで複数行にわたって表示される数式）として認識する区切り記号を指定できます。

displayMath: [
    ['$$', '$$'],
    ['\\[', '\\]']
]


これにより、

$$...$$
\[...\]

の間に書いた数式を、改行付きの大きな数式として認識させることができます。

svg.fontCache

SVG形式数式を描画するときのフォントキャッシュの設定をします。

フォントキャッシュとは、描画に必要なフォント情報を一時的に保存するデータ領域のことで、同じ文字を繰り返し描画する際に処理を高速化できます。

svg: {
      fontCache: 'global'
    }


「global」に設定することで、ページ全体で共通のフォントキャッシュを使うため、描画のパフォーマンスが向上します。

おわりに

今回は、JavaScriptライブラリ MathJax を使って、WebページにLaTeX形式の数式を簡単に表示する方法を紹介しました。

ぜひ、MathJaxを試して、読みやすい数式表示を実現してみてください。

同じカテゴリの最新記事