WordPressでプラグインなしでLatex数式を表示する方法

WordPressで記事を書いているとLatexで書いた数式を表示したいケースがあると思います。
今回は、そのような場合に簡単に数式表示ができるようになるMathJaxの使い方を紹介します。

MathJaxについて
WordPressでのMathJaxの使い方
数式の表示

MathJaxについて

MathJaxは、ウェブページ上で数式を美しく表示するための強力なJavaScriptライブラリです。特に、数学や物理の文献、論文、教材などで広く使用されています。このライブラリは、TeX、LaTeX、MathMLなどの数式記法をサポートし、数式をHTML、SVG、またはMathML形式で表示することができます。MathJaxは、ページ内の数式をクリーンで正確にレンダリングし、ブラウザ間の互換性を確保します。

MathJaxの主な利点の一つは、数式がユーザーのデバイスで動的にレンダリングされることです。これにより、異なる解像度やデバイスタイプに対応し、数式が常に最適な品質で表示されます。さらに、MathJaxはアクセシビリティにも配慮しており、スクリーンリーダーなどの支援技術と互換性があります。

MathJaxの設定は非常に柔軟で、必要に応じてカスタマイズが可能です。例えば、数式の表示スタイルを変更したり、特定のパッケージや拡張機能を追加したりすることができます。また、MathJaxは非同期で読み込まれるため、ページのパフォーマンスに影響を与えることなく数式をレンダリングできます。

WordPressや他のCMSでMathJaxを使用するには、簡単な設定を行うことで数式の表示を実現できます。スクリプトの読み込みと設定を行い、数式を適切な形式で埋め込むだけで、ページ上に美しい数式を表示することができます。これにより、教育資料や技術文書のクオリティが格段に向上し、読者にとって理解しやすいコンテンツを提供することができます。

MathJaxは、その高いカスタマイズ性と互換性、そして美しい数式表示の能力により、数式を頻繁に扱うあらゆるウェブサイトで利用されています。数式の視覚的な表現にこだわるなら、MathJaxは非常に有用なツールです。

WordPressでのMathJaxの使い方

WordPressダッシュボードにログインします。
左側のメニューから「外観」を選択し、「テーマエディター」をクリックします。
右側のファイルリストから「ヘッダー (header.php)」ファイルなどの<head>を編集できるファイルを選択します。
<head>タグの中に以下のスクリプトを追加します。

<script type="text/javascript" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>

設定はこれだけです。

例えば、Cocoonテーマを使っている場合には、tmp-user/header-insert.phpに上記のコードを追加することで利用可能になります。
$Cocoonでの設定$

数式の表示

投稿やページに数式を埋め込む際には、通常通りブロックにLatexを記述すると表示できます。

例えば、以下のように記述します。

\(100 \times (1 + r_1)(1 + r_2)(1 + r_3) + 100 \times (1 + r_2)(1 + r_3) + 100 \times (1 + r_3)\)

これを表示すると

このように数式になります。

コードエディターでhtmlとして入力することも可能です。

<p>インライン数式: \(100 \times (1 + r_1)(1 + r_2)(1 + r_3) + 100 \times (1 + r_2)(1 + r_3) + 100 \times (1 + r_3)\)</p>

<p>ブロック数式:</p>
$$
100 \times (1 + r_1)(1 + r_2)(1 + r_3) + 100 \times (1 + r_2)(1 + r_3) + 100 \times (1 + r_3)
$$