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>の上に入れるだけです。

数式を載せるのが一部の投稿だけならその投稿の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形式に変換してくれるツール

PR

3 件のコメント:

  1. bloggerで高校生向けの学習サイトを立ち上げた者です。
    どうしてもわからないことがあるので、質問させてください。

    この記事で紹介されているソースコードをhead内に入れると、PCブラウザ上ではきちんと数式が表示されます。しかし、スマホで見ると、数式が現れません。

    一方で、この記事をスマホで見ると、数式はきちんと見れます。この違いはなんなのでしょうか。

    http://indoctus2.blogspot.jp/

    返信削除
  2. 私のiPod touch(iOS 6.1.3)のSafariとKindle HDX7からは高校生が分かる数学topics!!の数式も正しく見えています。
    私はスマホをもっていないのでこれ以上検証できませんが、Delih Shoorさんとこのブログとの違いがあるとすればモバイサイトの有効か無効になるでしょうか。
    このブログもIE8ではモバイルサイトを無効にしていると表示がおかしくなる現象がありました。
    でもどうしてそれが原因で表示がおかしくなるかはわからず、モバイルサイトを有効にせざるを得ませんでした。
    Blogger:IE8で背景の色が消える問題(3)モバイルサイト有効にせざるを得ないに書いたようにモバイルサイトを無効から有効にするには変数を戻さなくてはならずひと手間必要でした。

    返信削除
    返信
    1. Blogger:IE8で背景の色が消える問題(4)また発生。今回は原因がはっきり判明。を読むとモバイルサイトの無効以外にもガジェットの内容でもおかしくなることがあるみたいです。

      削除