[WordPress] 美しい数式表示

WordPress で数式をきれいに表示する方法を説明します。

環境&対象

以下の環境で動作確認を行なっています。

  • WordPress 5.7.2
  • MathJax-LaTeX 1.3.11
  • その他プラグイン 多数

数式をきれいに表示

y = ax^2 + bx + c と書いてもわかりますが、やはり \(y=ax^2+bx+c\) と書いてあった方がきれいですし、なにより読みやすいです。

もう少し複雑になってくると、テキスト表示では、括弧の嵐になってしまい、破綻し始めます。

MathJax-LaTeX

MathJax という JavaScript できれいな数式を表示できる機能が開発されていて、それを WordPress 上で使えるようにしてくれるプラグインがあります。

MathJax-LaTeX というプラグインです。

上記は、GitHub のリンクですが、WordPress の プラグイン設定から、"MathJax-LaTeX" というキーワードで 新規プラグイン検索しても 見つかります。

インストールは、”インストール”ボタンでインストールして、プラグイン設定から有効化するだけです。

記述方法

数式を $$ で括って記述します。式そのものは、LaTeX での記述方法と同じです。¥frac で分数だったりです。

例えば解の公式は、 x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} と書くことできれいに表示されます。($$で括ります)

$$x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$

MathJax-LaTeX がうまく動かない時に

私の環境では、複数のプラグインをインストールしているせいか、$$x=... と表示されてしまい、うまく動作しませんでした。

プラグイン設定の "Force Load" をチェックすることで、動作するようになりました。

# この設定は、全てのページで MathJax JavaScript をロードするので、重くなってしまうかもしれません。

まとめ:WordPress で数式をきれいに表示する方法

WordPress で数式をきれいに表示する方法
  • プラグイン MathJax-LaTeX を使うと簡単にきれいな表示ができる
  • うまく動作しないときは、"Force Load" を ON に
  • 数式は、LaTeX と同じ書き方

説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です