唯物是真 @Scaled_Wurm

プログラミング(主にPython2.7)とか機械学習とか

MathJaxでの数式表示を試す

はてなブログの数式機能の出力が見やすくなかったので、MathJaxを使って数式を表示させてみます

MathJaxはJavaScriptによるライブラリで、Webページ中の「$$」などに挟まれた部分を自動的に数式に変換して表示してくれます
数式上の右クリックでTexやmathmlのコードを表示する機能があったりして便利です

以下に二種類の数式の表示を並べてみたのですが、正直MathJax版も(私の環境では)あまり見やすくはないですね……
右クリックするとユーザー側で描画の方式を変更できるみたいなので、変えてみるといいかもしれません(私の環境だと「HTML-CSS」では表示が崩れる)

MathJax版

\(f(x)=\frac{1}{\sqrt{2\pi\sigma^{2}}} \exp\!\left(-\frac{(x-\mu)^2}{2\sigma^2} \ \right) \)

\(f(x)=\frac{1}{\sqrt{2\pi\sigma^{2}}} \exp\!\left(-\frac{(x-\mu)^2}{2\sigma^2} \ \right) \)

はてな記法

f(x)=\frac{1}{\sqrt{2\pi\sigma^{2}}} \exp\!\left(-\frac{(x-\mu)^2}{2\sigma^2} \right)

[tex:f(x)=\frac{1}{\sqrt{2\pi\sigma^{2}}} \exp\!\left(-\frac{(x-\mu)^2}{2\sigma^2} \right)]

式番号

式番号を有効にすれば自動でつけてくれるみたいですが、以下のように\tag{1}などと手動で書いても式番号がつけれます
$$f(x)=\frac{1}{\sqrt{2\pi\sigma^{2}}} \exp\!\left(-\frac{(x-\mu)^2}{2\sigma^2} \ \right) \tag{1} $$

$$ f(x)=\frac{1}{\sqrt{2\pi\sigma^{2}}} \exp\!\left(-\frac{(x-\mu)^2}{2\sigma^2} \ \right) \tag{1} $$

はてなブログでの設定

以下のようにしてスクリプトを読み込ませると、自動的に文中の「$$」や「\(」「\)」などで囲った部分を数式として表示してくれます

<script type="text/javascript"
  src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

現在はMathJaxのスクリプトをフッタと、記事下の項目の両方で読み込ませています
記事下の方はスマホ版のページのためにやっているのですが、表示できてるかな?
追記、HTML-CSSの表示だと式が大幅に崩れることが多いので、SVGで表示させるようにしました。対応していないブラウザでは表示されません

更に追記(2014-02-19)、はてなブログの詳細設定でhead要素の中身を追加できるようになったので、scriptタグの追加が簡単になりました