2026年7月3日金曜日

Wordpress 数式表示プラグイン

数式を正確に表示させるための、Wordpress用のプラグインと、場合によって、html用に利用できる、Javascriptについて、雑学や業界話を交えながら、解説してください。

数式をWebで美しく表示する世界は、実は「Web技術の進化」を象徴する分野の一つです。

現在では、大学・研究機関・数学ブログ・物理学の解説サイト・AI関連の技術ブログなどでは、ほぼ LaTeX（ラテフ） という数式記法が共通言語になっています。WordPressでも、LaTeXを入力し、それをブラウザで美しく描画する方法が主流です。

なぜ普通のHTMLでは数式が苦手なのか

HTMLは文章を書くために設計されています。

例えば

x² + y² = z²

くらいならUnicodeで書けます。

しかし、

  ∫−∞∞e−x2dx=π\int_{-\infty}^{\infty} e^{-x^2}dx=\sqrt{\pi}

や

  ddx(sin⁡xx)\frac{d}{dx}\left( \frac{\sin x}{x} \right)

のような式になると、

  • 添字
  • 上付き文字
  • 分数
  • 積分
  • 行列
  • ギリシャ文字

などが大量に登場します。

HTMLだけで書くと、

<span>
<span style="vertical-align:super">

のような大量のタグになってしまい、人間にはほぼ編集不可能です。

そこで生まれたのが LaTeX です。

LaTeXという世界標準

例えば

\frac{a+b}{c+d}

と書けば

  a+bc+d\frac{a+b}{c+d}

になります。

さらに

\sum_{i=1}^{n}

なら

  ∑i=1n\sum_{i=1}^{n}

になります。

LaTeXは1980年代から使われており、

  • 数学
  • 物理
  • 情報科学
  • AI論文
  • arXiv

では事実上の世界標準です。

ちなみに、現在の生成AI（ChatGPTなど）も、数式はLaTeX形式で出力することが非常に多く、Web表示でもそのまま活用しやすいのが特徴です。

Wordpressで最も人気があるのは MathJax

① MathJax

最も有名です。

特徴

  • 非常に美しい
  • 論文品質
  • 大学でも採用
  • SVG表示可能
  • アクセシビリティが高い

入力

$$
E=mc^2
$$

↓

表示

  E=mc2E=mc^2

メリット

  • ほぼLaTeXそのまま
  • 数学記号が全部ある
  • 長い数式も崩れない

デメリット

やや重いです。

ページを開いたあとJavaScriptで描画するので、

昔は

「MathJaxを入れるとページが重くなる」

というのがWeb業界では有名な話でした。

現在のVersion 3ではかなり高速化されています。

② KaTeX

現在人気急上昇です。

これは

Khan Academy

が開発しました。

特徴

  • とても高速
  • 軽量
  • SEOにも有利
  • モバイル向き

MathJaxより数倍高速と言われます。

業界話

最近の技術ブログでは

MathJaxよりKaTeX

を採用するサイトが増えています。

理由は

Googleが

  • 表示速度
  • Core Web Vitals

を重視するようになったためです。

速度を少しでも改善したいブログではKaTeXが人気です。

Wordpressプラグイン

Simple MathJax

最もシンプル。

$$
...
$$

だけで動きます。

初心者向き。

WP QuickLaTeX

昔からあります。

画像生成方式も使えます。

現在では少し古い印象があります。

MathJax-LaTeX

こちらも定番。

投稿本文に

\( ... \)

や

$$ ... $$

を書くだけ。

Gutenberg対応プラグイン

最近では

  • 数式ブロック

として入力できるものもあります。

ブロックエディタとの相性はかなり良くなっています。

HTMLだけで利用するなら

実はWordPressは不要です。

HTMLに

<script>

を追加するだけです。

例えば

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

これだけで

$$
a^2+b^2=c^2
$$

が表示できます。

つまり

  • 自作ホームページ
  • GitHub Pages
  • 静的サイト

でも使えます。

KaTeXの場合

読み込むものは

katex.min.css

と

katex.min.js

です。

さらに

auto-render.min.js

を使うと、

ページ全体の

$$
...
$$

を自動検出して表示してくれます。

JavaScriptの役割

JavaScriptは

\frac{a}{b}

という文字列を見つけると、

内部で

HTML

↓

CSS

↓

SVG

または

HTML+CSS

へ変換します。

つまり

LaTeX

↓

JavaScript

↓

綺麗な数式

という流れです。

SVGとHTMLレンダリング

MathJaxには

  • HTML描画
  • SVG描画

があります。

SVGの特徴

  • 拡大しても綺麗
  • 印刷品質
  • PDF化にも向く

HTML描画は

  • 軽い
  • 速い
  • コピーしやすい

用途によって使い分けます。

SEOへの影響

昔は

「数式は画像にして貼る」

ことが一般的でした。

しかし画像では

  • Googleが読めない
  • コピーできない
  • 検索対象になりにくい

という問題がありました。

現在はMathJaxやKaTeXにより、数式をテキストベースで扱えるため、検索エンジンや支援技術との相性も向上しています。

AI時代の数式表示

近年は生成AIの普及により、

  • ChatGPT
  • 数学系AI
  • 論文要約AI
  • 教育サービス

などがLaTeX形式の数式をそのまま出力することが増えています。そのため、Web側でもLaTeXを直接表示できる環境を整えておくと、AIが生成した数式をほとんど加工せず掲載できるという利点があります。

ちょっとした業界話

  • MathJax は「品質重視」の代表格で、大学や学術系サイト、研究機関で広く採用されています。
  • KaTeX は「速度重視」の代表格で、教育サービスや技術ブログ、静的サイトなどで人気が高まっています。
  • Markdown + KaTeX の組み合わせは、技術ドキュメントや知識共有サイトでもよく見られます。
  • 数学系サイトだけでなく、AI・機械学習・データサイエンス分野ではLaTeX対応がほぼ標準機能になりつつあります。

これからWordPressで新しく数式を扱うサイトを作るのであれば、表示速度を重視するなら KaTeX、対応範囲や互換性を重視するなら MathJax を選ぶ、というのが現在でも定番の選択肢です。

投稿者 時刻:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)