MathJaxを使って、Web上に数式を表示

当ページのリンクには広告が含まれています。

更新日:

MathJaxを使って、Web上に数式を表示する方法を紹介します。

MathJaxとは

MathJax とは、LaTeX や MathML で記述されたテキストベースのコマンドをWeb上で数式に整形・表示するオープンソースのJavaScriptライブラリです。

MathJax の開発は、アメリカ数学会(American Mathematical Society、AMS)、Design Science, Inc. 、応用数理学会(Society for Industrial and Applied Mathematics、SIAM)によってサポートされています。

MathJax の使い方

MathJax は、コンテンツデリバリネットワーク(Contents Delivery Network、 CDN)で公開・配信されています。

そのため、JavaScriptライブラリをダウンロードして、サーバーにアップロードといった作業は必要ありません。以下のコードをHTMLのheadタグ内に記述するだけで簡単に利用することができます。

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

インターネットが利用できない環境でMathJaxを利用する場合(LAN内で利用する場合など)は、ダウンロードした JavaScriptライブラリ(MathJax.js)を以下のように直接読み込みましょう。

<script type="text/javascript" src="MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

さて、準備ができたところで、使い方を見ていきましょう。まずは、こちらのサンプルページをご覧ください。

「MathJax」のサンプル

昔懐かしい「解の公式」ですね。ソースコードをみてみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>MathJax - jQueryプラグイン</title>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</head>
<body>
<h1>MathJax のデモでーす。</h1>
<p>2次方程式 \(ax^2 + bx + c = 0\) の<b>解の公式</b>は</p>
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$
<p>でーす。</p>
</body>
</html>

head内でMathJax CDNのJavaScriptライブラリを読み込んでおり、LaTeXの数式が2つ記述しています。

一方の数式は「display: inline」、他方は「display: block」に表示・整形されるように記述しています。

それでは、ひとつずつ「使い方(記述方法)」をみていきましょう。

display: inline

mathjax-01
まずは、このように文中(display: inline)に数式を表示する方法をみてみましょう。

\(ax^2 + bx + c = 0\)

文中に数式を表示させたい場合は、「\(」からはじめて、「\)」で閉じれば、OKです。「\」はバックスラッシュです。

display: block

mathjax-02
次は、このように真ん中にどかーん(display: block)と数式を表示する方法です。

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

真ん中に数式を表示させたい場合は、「$$」ではじめて、「$$」で閉じます。

これだけわかれば、あとはLaTexのテキストを変更すれば……お好みの数式をWeb上に表示させることができます。

関連記事(一部広告含む)