投稿日：2019年4月8日｜最終更新日: 2019年4月7日

blogやWebサイトに綺麗な数式を表示する(MathJax)

HTML・CSS JavaScript

blogやWebサイトに数式を表示したいときがあります。そんなとき、MathJaxを使えば簡単に表示できます。

MathML
MathMLを補うMathJaxライブラリ
MathJax の導入方法
使用例

MathML

数式をWebページで表現するにはMathML （Mathematical Markup Language）というマークアップ言語を使います。MathMLはmathタグをHTMLの中に直接記述すれば、そのまま利用できます。WordPressを使用している場合、投稿の編集に以下のような記述を行います。

<mrow>
  <mi>x</mi>
  <mo>=</mo>
  <mfrac>
    <mrow>
      <mrow>
        <mo>-</mo>
        <mi>b</mi>
      </mrow>
      <mo>&PlusMinus;</mo>
      <msqrt>
        <mrow>
          <msup>
            <mi>b</mi>
            <mn>2</mn>
          </msup>
          <mo>-</mo>
          <mrow>
            <mn>4</mn>
            <mo>&InvisibleTimes;</mo>
            <mi>a</mi>
            <mo>&InvisibleTimes;</mo>
            <mi>c</mi>
          </mrow>
        </mrow>
      </msqrt>
    </mrow>
    <mrow>
      <mn>2</mn>
      <mo>&InvisibleTimes;</mo>
      <mi>a</mi>
    </mrow>
  </mfrac>
</mrow>

以下のように表示されます。

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

MathMLの欠点

MathMLには、対応しているブラウザとしていないブラウザがあります。2018年1月時点で、MathMLの対応状況は以下のとおりです。

対応済み	未対応
Firefox、Safari、iOS Safari	Chrome、Chrome for Android、Internet Explorer、Microsoft Edge

サポート状況については下記ページで確認できますが、主要ブラウザの対応が完了するにはまだまだ時間が掛かりそうです。

→MathML

MathMLを補うMathJaxライブラリ

数式を表示するための最良の手段はMathJaxというJavaScriptライブラリです。MathJaxを導入すれば、MathMLで対応していないブラウザ（Chrome、Chrome for Android、Internet Explorer、Microsoft Edge）でも数式を表示できるようになります。

MathJax の導入方法

MathJaxをWebサイトに導入するには、headタグ内に以下の１行を記述するだけです。

<!DOCTYPE html>
<html class="no-js" lang="ja">
<head>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
</head>

タグ中にある「2.7.5」は、MathJax のバージョン番号です。最新バージョンは以下のサイトにアクセスし、「MathJax」というキーワードで検索すると確認できます。

→cdnjs.com

WordPress サイトの場合

WordPressサイトに導入する場合は、以下の２つの方法があります。

①WordPress サイトの場合にはテーマ（テンプレート）に直接scriptタグを埋め込む。

②プラグイン「MathJax」をインストール。

プラグインはいくつかありますが、MathJax-LaTeX と Simple Mathjax の２つが定番のようです。

使用例

①Webサイトのソースファイル（html）やWordPressサイトの場合は、投稿の編集に以下の記述を行います。

　
\[
　
\]

②①で記述した　¥[　と　¥]　の内部に目的の数式コードを記述します。

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

③サイトをブラウザで表示すると、以下のように表示されます。

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

数式の記述方法につきましては、以下のサイトが参考になります。

参考：Easy Copy MathJax

トラックバック用のURL

プロフィール

名前：イワサキ　ユウタ職業：システムエンジニア、ウェブマスター、フロントエンドエンジニア誕生：1986年生まれ出身：静岡県特技：ウッドベース略歴 20