2026年10月27日火曜日

Wordpress 数式表示プラグインについて

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

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

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

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

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

例えば

x² + y² = z²

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

しかし、

\int_{- \infty}^{\infty} e^{- x^{2}} d x = \sqrt{π}

\int_{-\infty \infty} e^{- x 2} d x = π

や

\frac{d}{d x} (\frac{\sin x}{x})

d x d (x sin x)

のような式になると、

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

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

HTMLだけで書くと、

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

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

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

LaTeXという世界標準

例えば

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

と書けば

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

c + d a + b

になります。

さらに

\sum_{i=1}^{n}

なら

\sum_{i = 1}^{n}

i = 1 \sum n

になります。

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

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

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

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

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

① MathJax

最も有名です。

特徴

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

入力

$$
E=mc^2
$$

↓

表示

E = m c^{2}

E = m c^{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 を選ぶ、というのが現在でも定番の選択肢です。

MathJax-LaTeXimage (image)

このプラグインは WordPress (http://www.wordpress.org) 上に MathJax (http://www.mathjax.org) の機能を追加します。作者: knowledgeblog 評価4.5 (11件の評価に基づく) 最終更新: 2年前有効インストール数: 10,000+ 使用中の WordPress バージョンで未検証

LaTeX2HTMLimage (image)

LaTeX2HTML makes you write blog like in LaTeX doc. 作者: Van Abel 評価5.0 (9件の評価に基づく) 最終更新: 5か月前有効インストール数: 200+ 使用中の WordPress バージョンで未検証

Yet another plugin to add MathJax support to your wordpress blog. Just wrap your equations inside $ signs and MathJax will render them visually. 作者: Samuel Coskey 評価4.5 (14件の評価に基づく) 最終更新: 1年前有効インストール数: 4,000+ 使用中の WordPress バージョンで未検証

WPMathPubimage (image)

Render mathematical equations in WordPress as PNG images using pmath native syntax or LaTeX input with server-side rendering. 作者: Ron Fredericks 評価4.0 (5件の評価に基づく) 最終更新: 6か月前有効インストール数: 300+ 使用中の WordPress バージョンで未検証

KaTeXimage (image)

Use the fastest math typesetting library on your website. 作者: Tom Churchman 評価5.0 (16件の評価に基づく) 最終更新: 1年前有効インストール数: 2,000+ 使用中の WordPress バージョンで未検証

Youngwhan's Simple Lateximage (image)

The usage is simple. 作者: breadncup　　　　　　　　　　　ーーーーー　　　　　どれが、お勧めですか？、それぞれの特徴や、使い方など、雑学や業界話を交えながら、解説してください、

一覧を見る限り、2026年現在でも実用的なのは「MathJax-LaTeX」と「KaTeX」の二択と言ってよいでしょう。他のプラグインにも特徴はありますが、用途がかなり限定されます。以下、それぞれを「おすすめ度」「向いている人」「業界での立ち位置」も交えて紹介します。

★★★★★ 1. MathJax-LaTeX（最もおすすめ）

おすすめ度：★★★★★ あなたのように、

数学
物理
AI
技術解説
教材

を書くなら、一番安心です。

特徴

MathJax本家を利用するプラグインです。例えば

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

と書くだけで \[ \frac{a+b}{c+d} \]になります。

メリット

✔ LaTeXとの互換性が非常に高い ✔ 数学記号がほぼ全部ある ✔ 行列

\begin{matrix}
...
\end{matrix}

もそのまま書ける ✔ 積分 ✔ 偏微分 ✔ ベクトル ✔ 化学式なども対応しています。

デメリット

JavaScriptで描画するため KaTeXよりは少し重いです。ただし最近のPCでは気になるほどではありません。

業界話

昔（2012～2018年頃）は

「MathJaxは重い」

という話題がWeb制作者の間でよくありました。しかしVersion3以降ではかなり改善され、現在では

「重いと言われるけど、実際は十分速い」

という評価に変わっています。

★★★★★ 2. KaTeX

おすすめ度：★★★★★ 速度ならこれ。

KaTeXは Khan Academy が開発しました。教育サイトなので、「子供でもサクサク表示」を目標に作られています。

特徴

MathJaxよりかなり高速です。ページを開くと「あっという間」に数式が表示されます。

メリット

かなり軽いスマホでも速い SEOにも有利表示速度が速い

デメリット

ほんの一部、特殊なLaTeX命令が使えません。例えばかなりマニアックな

\newcommand

など。普通の数学ならまず困りません。

業界話

最近の技術ブログでは KaTeX派 が増えています。理由は Googleが Core Web Vitals を重視しているからです。表示速度が速いほど SEOにも少し有利になります。

★★★★☆ 3. Simple MathJax

おすすめ度：★★★★☆ これは MathJaxを「なるべく簡単に導入」するためのプラグインです。

特徴設定が少ない初心者向けすぐ動く

逆に細かな設定はあまりできません。

向いている人

ブログで年に数回数式を書くくらいなら十分です。

★★★☆☆ 4. LaTeX2HTML

おすすめ度：★★★☆☆ これは少し変わっています。名前の通り LaTeX文書っぽくブログを書けます。

例えば

\section

\subsection

\begin{equation}

など、論文を書くような感覚になります。

向いている人

普段から TeXで論文を書いている研究者

業界話

昔は大学教員がブログを論文みたいに書くという用途で人気がありました。現在では利用者はかなり少数派です。

★★☆☆☆ 5. WPMathPub

おすすめ度：★★☆☆☆ 少し特殊です。 JavaScriptではなくサーバー側で PNG画像を生成します。

メリット JavaScript不要どのブラウザでも同じ見た目

デメリット画像なのでコピーできない拡大すると荒れる SEOも弱い

昔話

2005～2010年頃は画像生成が主流でした。まだMathJaxが普及していなかったからです。現在では画像方式はかなり減っています。

★★☆☆☆ 6. Youngwhan's Simple Latex

おすすめ度：★★☆☆☆ かなりシンプル。最低限だけ使いたい人向け。

更新頻度を見る限り、大規模サイト向けではありません。

それぞれを車で例えると

プラグイン	車に例えると	特徴
MathJax-LaTeX	トヨタ・クラウン	高性能・安心・万能
KaTeX	スポーツカー	とにかく速い
Simple MathJax	コンパクトカー	手軽で扱いやすい
LaTeX2HTML	特殊車両	論文執筆向け
WPMathPub	昔のクラシックカー	画像生成方式
Youngwhan	軽自動車	最小構成

どれを選ぶべき？

あなたが以前から

WordPressで数学や理工系の記事を書くこと
ChatGPTが出力したLaTeX数式をそのまま活用したいこと

を考えているのであれば、次の選び方がおすすめです。

① 一番おすすめ：MathJax-LaTeX

LaTeXとの互換性が高い
複雑な数式も安心
将来的に高度な数式を書いても対応できる

② 表示速度を最優先：KaTeX

ページ表示が速い
モバイルに強い
一般的な数式なら十分な機能

業界のちょっとした雑学

実は、ChatGPT、Claude、Geminiなどの生成AIが出力する数式は、ほとんどがMathJaxやKaTeXでそのまま表示できるLaTeX形式です。そのため、現在では「AIで数式を生成 → WordPressへ貼り付け → MathJaxまたはKaTeXで表示」というワークフローが、教育サイトや技術ブログではごく自然なものになっています。また、GitHub、Markdown対応エディタ、Jupyter NotebookなどもLaTeXベースの数式表示を採用しているため、一度LaTeXの書き方に慣れると、WordPress以外の多くの執筆環境でもその知識をそのまま活かせます。 総合すると、「互換性重視なら MathJax-LaTeX」「速度重視なら KaTeX」という二本柱が、現在でも最もおすすめの選択です。

0 件のコメント:

コメントを投稿

2026年10月27日火曜日

Wordpress 数式表示プラグインについて

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

LaTeXという世界標準

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

① MathJax

メリット

デメリット

② KaTeX

業界話

Wordpressプラグイン

Simple MathJax

WP QuickLaTeX

MathJax-LaTeX

Gutenberg対応プラグイン

HTMLだけで利用するなら

KaTeXの場合

JavaScriptの役割

SVGとHTMLレンダリング

SEOへの影響

AI時代の数式表示

ちょっとした業界話

MathJax-LaTeXimage (image)

LaTeX2HTMLimage (image)

Simple Mathjaximage (image)

WPMathPubimage (image)

KaTeXimage (image)

Youngwhan's Simple Lateximage (image)

★★★★★ 1. MathJax-LaTeX（最もおすすめ）

特徴

メリット

デメリット

業界話

★★★★★ 2. KaTeX

特徴

メリット

デメリット

業界話

★★★★☆ 3. Simple MathJax

向いている人

★★★☆☆ 4. LaTeX2HTML

向いている人

業界話

★★☆☆☆ 5. WPMathPub

昔話

★★☆☆☆ 6. Youngwhan's Simple Latex

それぞれを車で例えると

どれを選ぶべき？

① 一番おすすめ：MathJax-LaTeX

② 表示速度を最優先：KaTeX

業界のちょっとした雑学

0 件のコメント: