MathJax(1)ブログに数式をきれいに表示させる方法

数式をブログに載せる方法を調べてみるとMathJaxを使うのが正攻法のようです。MathJaxの導入はすごく簡単ですが数式自体はLaTeXの形式で記述しないといけません。

MathJaxをBloggerに導入する方法はとても簡単

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

これをテンプレートのHTMLの</head>の上に入れるだけです。

(2018.3.18追記。上記のcdnは廃止されて下記に変更されていました。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

MathJax CDN shutting down on April 30, 2017. Alternatives available. | MathJaxではlatestではなくバージョンを指定することを推奨されていました。)

数式を載せるのが一部の投稿だけならその投稿のHTMLに載せても大丈夫です。

ページのどこかで読み込まれればいけるようです。

しかし、いずれにせよGoogle外部から表示結果を受け取ることになるのでプレビューや非公開ブログでは表示できません。

プレビューや非公開ブログでも数式が表示されるようにするのは断念

(2014.5.29追記。非公開ブログでは表示されました。MathJax(4)表示チェック用のテストブログを作成するへ。）

(2014.6.15追記。いつのまにかプレビューでも表示されるようになっていました。）

(2015.6.21追記。プレビューだと同じ式が3回繰り返し表示されてしまいます。記事を公開すると正しく表示されます。）

 jQueryみたいにGoogle Hosted LibrariesにMathJaxがあればよいのですが見当たりません。

そこでMathJaxのスクリプトをGoogleサイトに置けばプレビューや非公開ブログでも結果が受け取れるだろうと考えました。

MathJax | Get MathJax

ここからMathJaxの本体をダウンロードします。

Current Version:  MathJax-2.3 (32.9MB)

現バージョンは2.3で32.9MBもありダウンロードはすごく時間がかかりました。

zipファイルを解凍後にBlogger:外部ファイル置き場をGoogleドライブからGoogleサイトへ変更を参考に自分のGoogleサイトへアップロードしようとしましたが、、、


アップロードしないといけないフォルダが1905個もあります。

Googleサイトはサブフォルダをアップロードできないのでアップロード作業を1905回繰り返さないといけません。

Googleドライブにはまとめてアップロードできそうですが、ファイル名が変わってしまうので動かないでしょう。

ということでプレビューや非公開ブログでも数式が表示されるようにするのは断念しました。

数式をLaTeXの形式にして¥(数式¥)または$$数式$$、¥[数式¥]とする

以下¥は\と表示されているかもしれませんがどちらも¥キーで入力された同じ文字です。

Getting Startedに載っている例文です。

When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

これをこのままBloggerの作成画面に貼り付けると

When $a \ne 0$, there are two solutions to $$$ax^2 + bx + c = 0$$$ and they are $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
赤字のところがちょっとおかしいですね。

これはアメリカでは$が通貨記号のため普通の文章に$が登場する確率が高いためデフォルトでは$が無効にされているためです。

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
  });
</script>

[['$','$'], ['\\(','\\)']]の部分は[['$','$']]でもよさそうに思いましたがダメでした。
(MathJax(3)数式を挟む記号を変更する方法で理由がわかりました。）

このコードをHTMLに載せると正しく表示されますがわざわざ$を有効にする必要はないと思います。
行中に挿入するときは¥(数式¥)、独立した行で表示させるには$$数式$$か¥[数式¥]にします。

ということで上の例を以下のように修正します。

When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

When $$$a \ne 0$$$, there are two solutions to $$$ax^2 + bx + c = 0$$$ and they are $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$ これで赤字部分もちゃんと表示されましたね。
IE10、IE8、Sleipnir4、Chrome、Firefox、iOS Safari いずれも数式は正しく表示されました。

MathJaxとは関係ない話ですが、¥はブラウザ見ると\と表示されるため文中の¥は&yen;とHTMLに入力しました。

ところが保存をするとBloggerの編集画面では作成モードでもHTMLモードでもどちらも¥に見えて区別がつかなくなりました。

でもブラウザで見ると¥と\は区別されていますね。不思議です。

参考にしたサイト

MathJax
本家のサイト。

Getting Started — MathJax 2.3 documentation
本家の導入方法の解説ページ。

次の関連記事:MathJax(2)数式をLaTeX形式に変換してくれるツール