ブログでも数式を美しく！MathJaxの導入方法とおすすめ設定
MathJaxのブログへの導入方法とおすすめ設定についてまとめてみました。
MathJaxとは
MathJaxというのは、ブラウザ上で数式をきれいに表示させることができるJavaScriptライブラリです。今や世界の多くの学術サイトで使用されており、デファクトスタンダードと化しています。
MathJaxはTeXのコマンドをサポートしており、TeXと同じ感覚でTeX並みに美しく数式を表現することができます。例えば、普通に書くと
e^{iθ} = cosθ + sinθ
のようになりますが、MathJaxを使うと
$e^{i \theta} = \cos \theta + i \sin \theta$
という感じに。数式としての見やすさが全然違いますね！
普通に書くだけだと上付きや下付きの表現が分かりづらいし、限界があります。数学や物理などに関連する記事を書きたいときは、MathJaxが非常におすすめです。
導入方法
導入方法はいたって簡単！以下のコードを<head>内に設置するだけでOKです。
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
これだけでMathJaxを使い始めることができます。WordPressでもBloggerでも、基本的にこのscriptタグ1個設置するだけで良いのです。めちゃくちゃ楽ですね。
使い方
基本的な使い方はTeXとほぼ同じですが、デフォルトでは書き方が異なっているのでご注意。
通常、TeXでは数式をインライン表示する際$...$という風に書きますが、MathJaxでは\(...\)と書く必要があります。（\はバックスラッシュ or 円マーク）
※ただし、後述の設定で$...$形式にすることが可能です。
別行立ての数式の場合は、本家TeXと同じく\[...\]で書きます。
ちなみに、行中で数式を表示する場合は前後に半角スペースを入れるとちょうど良い感じに表示できます。
①半角スペースのない$A$です。（半角スペースのない$A$です。）
②半角スペースのある $A$ です。（半角スペースのある $A$ です。）
半角スペースが入ると、前後の境界も分かりやすくなります。
対応コマンド抜粋
よく使うTeXコマンドの抜粋です。
| 記号 | コマンド | 表示 |
|---|---|---|
| + | + | $+$ |
| - | - | $-$ |
| × | \times | $\times$ |
| ÷ | \div | $\div$ |
| ・ | \cdot | $\cdot$ |
| … | \cdots | $\cdots$ |
| ... | \ldots | $\ldots$ |
| = | = | $=$ |
| ≠ | \neq | $\neq$ |
| ≒ | \fallingdotseq | $\fallingdotseq$ |
| > | \gt | $\gt$ |
| < | \lt | $\lt$ |
| ≥ | \geq | $\geq$ |
| ≤ | \leq | $\leq$ |
おすすめ設定
そのままだと少し使いにくいので、MathJaxの設定をカスタマイズします。
いくつかのサイトを参考にして試してみたところ、個人的に以下の設定が基本形としてベストかなぁと思いました。
<script>
window.MathJax = {
tex: {
inlineMath: [
['$', '$'],
['\\(', '\\)']
]
},
chtml: {
mtextInheritFont: true
}
};
</script>
置き場所は、先ほどと同じく<head>内に設置すればOKです。
簡単に説明をすると、texの部分で表示に関する設定をしており、inlineMathでは数式をインライン表示する際にTeXと同様$...$という形式でも書けるように設定しています。displayMathも同じく$$...$$のように表示を変更できますが、文字数同じだし通常は\[...\]なのでそのままで。
chtmlの部分では、数式環境中の数式以外のフォントが本文と同じになるように設定しています。（デフォルトはfalse）
これ以外にもいろいろな設定を行うことができるので、詳しくはMathJaxのドキュメントを確認してみてください。
Configuring MathJax — MathJax 3.1 documentation
問題
MathJaxを使っているときの問題として、長い数式があった場合に表示がはみ出してしまうことがあります。（主にスマホ表示）
こんなときは、確認してはみ出しているorはみ出しそうな要素を以下のようにspanで囲み、CSSで調整することで解決できます。
<span class="scroll">$...$</span>
.scroll {
display: block;
overflow-x: auto;
overflow-y: hidden;
}
overflow-xで横方向のはみ出しをスクロールに、overflow-yで縦方向のはみ出しを非表示にすることで、領域内からはみ出すことなく表示されるようになります。
【使用例】
$(x + y)^n = \sum_{k=0}^{n} {}_n \mathrm{C}_k \ x^k y^{n-k} = \sum_{k=0}^{n} {}_n \mathrm{C}_k \ x^{n-k} y^k = x^n + nx^{n-1}y + \cdots + y^n.$
まとめ
使用しているブログサービスを問わず、MathJaxを導入するのはとっても簡単です。設定を少し工夫するだけで、TeXとほぼ変わらない感覚で使えるのも嬉しいところですね。
MathJaxを使うと数式の見た目がきれいですし、モチベーションUPにも繋がると思います。ドキュメントを参考にして自分好みにカスタムしながら、色々なシーンで使ってみてください。
ところが、テーマ以外の話だが、このブログのテーマはどのテーマに基づいていますか？ベースから自作ですか？
コメントありがとうございます。遅延読み込みさせていること、よくお気づきになりましたね(笑)
あえて触れていなかった＆圧縮していたのですが…見事に見破られていました。流石です(^^;
ブログのテーマは「Simple」をベースに作っています。
加えて、Fuma氏のテンプレートには、いくつかのb：widgetとb：sectionのHTMLコメント処理されていました。そうする方法は何であり、それの利点は何ですか？
ちょっとテクニカルな方法ですが、b:sectionとb:widgetをコメントアウトするために以下のように設定しています。
<header><!--
<b:section ... >
<b:widget ... >
<b:widget-settings>
...
</b:widget-settings>
<b:includable id='main'>-->
...
b:sectionやb:widget内にHTMLタグが含まれているとエラーが出てしまうので、そうならない位置でコメントアウト用の処理をしています。
理由としては、HTML構造最適化の一環ですね。b:section, b:widgetがあると自動的にdivタグ2つで囲われることになりますが、それらをコメントアウトすることで<header>1つのみ表示することができ、階層を1つ削減できます。
コメントを書き込む