石田修二のホームページ > コンピュータメモ >

MathJax

ホームページで綺麗な数式を表示したいということで現在,MathJaxを使っています(実装例)。当初,外部のサーバから呼び出す形を取っていましたが,まるまる自鯖でやってみたいということで,契約しているcoreserverにインストールしてみました。以下はその時のメモです。

バージョン 2.0 から使っています。2.0の実装例はこちら。2.2の実装例はこちら。2.4の実装例はこちら,2.5の実装例はこちらです

ファイルをげっと

公式サイトからファイルをいただきます。ファイル名はこのページを作っている時点では MathJax-master.zip です。

ZIPファイルを解凍する

次にzipファイルを解凍します。解凍する場所については,大きく分けて2つあります。

1つは,ZIPファイルをサーバにアップして,サーバ上で解凍するやり方です。構成ファイルの数が約3万もあるので,時間が少々かかります。例えば,mathjaxというフォルダの下にインストールしたいなら、一つ上位のフォルダにzipファイルを置き、そこで解凍しましょう。

もう1つは,自分のパソコン上で解凍して,その後,解凍した全ファイルをサーバにアップする方法です。よくわからないけど,FTPぐらいは知っているという技術レベルであれば,おすすめです。ただし,解凍時間のみならず、アップロードする時間は凄まじくかかります。

サーバに全ての構成ファイルをインストールできたら,それでおしまい。パーミッションの変更も必要ありません。

(補足)MathJaxディレクトリの最上位の構成状態

mathjax
(7つのディレクトリ)
└ config
└ fonts
└ extensions
└ images
└ jax
└ test
└ unpacked
(5つのファイル)
└ .gitignore
└ LICENSE
└ Mathjax.js
└ README-branch.txt
└ README.md

HTMLファイルの書き方

headタグの間に次のおまじないを入れるだけです。例えば,私は次のおまじないを入れています。

<script src="/mathjax/MathJax.js?config=TeX-AMS_CHTML">
MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [['$','$'], ["\\(","\\)"]],
    displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
    processEscapes: true
  },
  "HTML-CSS": { availableFonts: ["TeX"], matchFontHeight: true },
  displayAlign: "left",
  displayIndent: "2em"
});
</script>

もっとも,上の設定を MyConfig.js というファイルに用意して、次のようにして読み込めば複数の HTML ファイルで同じ設定を共有できます。

<script src="/mathjax/MathJax.js?config=TeX-AMS_CHTML">
</script>
<script src="/shuji/tech/mathjax/MyConfig.js">
</script>

なぜかうちのサーバーでは先にMathJax.jsを読み込み,ついで カスタマイズした MyConfig.js を読み込まないとうまく表示されません。あと,script タグの中に,type="text/x-mathjax-config" 属性を入れる解説もありますが,私の場合,入れるとこれまたうまく表示されません。原因究明中です。

数式自体はbodyタグの中に,TeXの記法で記述します。例えば,二次方程式の解の公式であれば,次のように記述します。

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

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

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

インライン表示であれば,$$の代わりに$を入れます。たとえば,

二次方程式の解の公式は
 $\displaystyle x = \frac{-b\pm\sqrt{b^2-4ac}}{2a}$
です。

は次のように表示されます(少々,右にインデントされていますが,本来は普通に左揃えされた状態で表示されます。これは私が別にインデント設定をしているだけです)。

二次方程式の解の公式は $\displaystyle x = \frac{-b\pm\sqrt{b^2-4ac}}{2a}$ です。

なお,先ほどの例で\displaystyleを省略すると,次のように表示されます。

二次方程式の解の公式は $x = \frac{-b\pm\sqrt{b^2-4ac}}{2a}$ です。

tDiaryで使う方法

tDiaryでもmath_jax.rbというプラグインが用意されています。

tDiaryのインストール先の skel/header.rhtml の headの部分に以下のおまじないを追加すればいいようです。

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]] } });
</script>
<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">
</script>

Others

Internet Explorer (IE) でプラグイン『DivX Plus Web Player HTML 5』が有効になっていると、「'JSON'は宣言されていません」とエラーが出て、表示されない。この際は、『DivX Plus Web Player HTML 5』を無効にして、IEを再起動するとうまくいくようだ。無効にするやり方は「インターネットオプション」→「プログラム」→「アドオンの管理」。

Bookmark


リンクはご自由にどうぞ。

【石田修二フロントページ】 【コンピュータメモ】