WordPressで記事を書いていてもLaTeXで書いたような数式を表示したいと思います。
MathJax-LaTeXやKaTeXなどのプラグインを用いて数式を表示しようとしましたがうまくいきませんでした。
しかし、ヘッダ設定ファイルを編集することでMathJax本体を読み込むように設定し、
簡単にLaTeXの記法で数式を書くことができるようになりました。
MathJaxとは
以下は公式サイトからの抜粋とラフな翻訳と説明です。
MathJaxはブラウザさえあれば美しい数式をレンダリングできる、強力なJavaScriptエンジンです。ページの読者はLaTeXのような難しい環境構築をする必要がありません。
MathJaxの特徴
拡大縮小に強い
MathJaxはビットマップ画像（PNG、JPG、GIFなど）ではなく、ウェブフォントやSVGを用いたCSSで数式を表示するため、拡大縮小しても周囲の文字と同じようにスケーリングされ、常に美しく保たれます。
豊富な入出力の選択肢
入力としてMathML、TeX、ASCIImath、出力としてHTML/CSS、SVG、MathMLを選択できるそうです。しかし、WordPressで主に使用するのはTeX入力からのHTML/CSS出力となるでしょう。
| 入力 | 出力 |
|---|---|
\(E=mc^2\) |
\(E=mc^2\) |
使い勝手が良い・再利用できる
MathJaxはスクリーンリーダーに対応しており、編集や拡大と同時にレンダリングすることができます。LaTeXのようなコンパイルが必要ありません。
また、一度数式を書き切ればそれをOfficeやLaTeXにコピペして再利用できます。
MathJaxが気になった方は英語ですが公式サイトにアクセスしてライブデモを試してみてください。
WordPressにMathJaxを導入する手順
1. WordPressダッシュボードにログイン
2. 左側のメニューから、「外観」→「テーマファイルエディタ」をクリック
3. ヘッダを編集できるファイルを選択（Cocoonではtmp-user/header-insert.phpに相当）
4. 以下のJavaScriptを貼り付け
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"> </script>
5. ファイルを更新をクリック
これでMathJaxが使えるようになりましたが、これではスマホで見たときにはみ出して見えてしまいます。
標準模型の作用
もうひと手間かけてスマホでもきれいに見えるように追加CSSを書きます。
MathJaxをスマホでもきれいに表示する方法
1. ダッシュボードにアクセス
2. 「外観」→「カスタマイズ」をクリック
3. 追加CSSを開く
4. 以下のCSSを追記
div.blank-box{
overflow-x: auto;
overflow-y: hidden;
}
これでスマホでもきれいに映るようになりました。overflow-x:auto;によって、はみ出してしまう部分はスクロールするように設定しています。
スマホでもきれいな数式
MathJaxの使い方
MathJaxでもLaTeXのようにインライン数式とブロック数式があります。
インライン数式の使い方
文章中に
アインシュタインは\(E=mc^2\)と言った。
と書くと、
と出力されます。
ブロック数式の書き方
今度は1行丸ごと数式で占有する書き方です。たとえば
次に、自然数$n\geqq 3$について、 $$ x^n + y^n = z^n $$ をみたす自然数の組$(x,y,z)$が存在しないことを素晴らしく示す。 なお、スペースが足りないので証明は省略する。
とかくと、
$$
x^n + y^n = z^n
$$
をみたす自然数の組$(x,y,z)$が存在しないことを素晴らしく示す。
なお、スペースが足りないので証明は省略する。
今日の数式：等価原理
$$
E = mc^2
$$
アルベルト＝アインシュタインが1905年に発見した質量とエネルギーは同じものだということを表す式です。
簡単な例でいうと、太陽は水素の質量の一部を核融合によってエネルギーに変えることで光っていますが、
その寿命のオーダーを見積もる際にこの等価原理が用いられます。
コメント