石田修二のホームページ > コンピュータメモ >
ホームページで綺麗な数式を表示したいということで現在,MathJaxを使っています(実装例)。当初,外部のサーバから呼び出す形を取っていましたが,まるまる自鯖でやってみたいということで,契約しているcoreserverにインストールしてみました。以下はその時のメモです。
バージョン 2.0 から使っています。2.0の実装例はこちら。2.2の実装例はこちら。2.4の実装例はこちら,2.5の実装例はこちらです
公式サイトからファイルをいただきます。ファイル名はこのページを作っている時点では MathJax-master.zip です。
次にzipファイルを解凍します。解凍する場所については,大きく分けて2つあります。
1つは,ZIPファイルをサーバにアップして,サーバ上で解凍するやり方です。構成ファイルの数が約3万もあるので,時間が少々かかります。例えば,mathjaxというフォルダの下にインストールしたいなら、一つ上位のフォルダにzipファイルを置き、そこで解凍しましょう。
もう1つは,自分のパソコン上で解凍して,その後,解凍した全ファイルをサーバにアップする方法です。よくわからないけど,FTPぐらいは知っているという技術レベルであれば,おすすめです。ただし,解凍時間のみならず、アップロードする時間は凄まじくかかります。
サーバに全ての構成ファイルをインストールできたら,それでおしまい。パーミッションの変更も必要ありません。
mathjax (7つのディレクトリ) └ config └ fonts └ extensions └ images └ jax └ test └ unpacked (5つのファイル) └ .gitignore └ LICENSE └ Mathjax.js └ README-branch.txt └ README.md
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でも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>
Internet Explorer (IE) でプラグイン『DivX Plus Web Player HTML 5』が有効になっていると、「'JSON'は宣言されていません」とエラーが出て、表示されない。この際は、『DivX Plus Web Player HTML 5』を無効にして、IEを再起動するとうまくいくようだ。無効にするやり方は「インターネットオプション」→「プログラム」→「アドオンの管理」。
リンクはご自由にどうぞ。