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>
さて、準備ができたところで、使い方を見ていきましょう。まずは、こちらのサンプルページをご覧ください。
昔懐かしい「解の公式」ですね。ソースコードをみてみましょう。
<!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
まずは、このように文中(display: inline)に数式を表示する方法をみてみましょう。
\(ax^2 + bx + c = 0\)
文中に数式を表示させたい場合は、「\(」からはじめて、「\)」で閉じれば、OKです。「\」はバックスラッシュです。
display: block
次は、このように真ん中にどかーん(display: block)と数式を表示する方法です。
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$
真ん中に数式を表示させたい場合は、「$$」ではじめて、「$$」で閉じます。
これだけわかれば、あとはLaTexのテキストを変更すれば……お好みの数式をWeb上に表示させることができます。