0. はじめに
下記 @tsubolabo さんの質問というか要望事項について考える。
解決済みを除き，現在（本記事執筆中の2025年10月時点）における課題は以下の4つ。
- インライン数式のベースラインが不揃いになる。
- 文字の上の装飾記号の位置が高すぎる。
- 大型括弧（場合分けなど）が上下に分断する。
- 数式番号の上下方向の位置ずれ。
それでは一つずつ再現させながら対処方法について考えていこう。
1. インライン数式のベースラインが不揃いになる。
1.1 MathJax の状態
まず，自分でも試してみよう。皆さんも以下の二行が自分の環境でどう見えるのか確かめて欲しい。
任意の変数 $a$, $b$ とする。これは問題なし。
任意のベクトルを $\vec{a}$, $\vec{b}$ とする。これはベースラインが揃わない。
実はこの問題，ブラウザ依存性があるのだ。Microsoft Edge（Chromium ベース）の場合は確かにベースラインが揃わない。※下図はスクリーンショットを貼り付けたもの。
しかしながら，いまや少数派となってしまった Mozilla Firefox では問題ないように思える。
ちなみに Safari は Firefox 寄りである。
2. 文字の上の装飾記号の位置が高すぎる。
2.1 MathJax の状態
自分でも試してみよう。サンプルが示されていないので適当なものを見繕ってきた。さすがに黒板太字 $\mathbb{e}$ はドット記号が離れ過ぎているように思える。
\dot{e} = \dot{\mathbf{e}} = \dot{\mathbb{e}}
```math
\dot{e} = \dot{\mathbf{e}} = \dot{\mathbb{e}}
```
ちなみにブラウザ依存性はあまりない。
2.2 PlantUML の Latex を用いた場合
PlantUML の Latex を試してみるとドット記号が接近する。見比べてみると，確かにこちらの位置のほうが自然に思える。なお，残念ながら黒板太字をサポートしていない様子。
```plantuml
@startlatex
\dot{e} = \dot{\mathbf{e}} = \dot{\mathbb{e}}
@endlatex
```
PlantUML はインラインで書けない，念のため。
3. 大型括弧（場合分けなど）が上下に分断する。
3.1 MathJax の状態
自分でも試してみよう。サンプルが掲示されていないので過去の自分の記事から引用するが，確かに括弧が上下に分断されている。
\left\{ \begin{eqnarray}
a! \equiv 0 \pmod 3 \\
-4m^2 \equiv -m^2 \pmod 3 \\
4^c \equiv 1 \pmod 3 \\
2024 \equiv 2 \pmod 3
\end{eqnarray} \right. \tag{6}
```math
\left\{ \begin{eqnarray}
a! \equiv 0 \pmod 3 \\
-4m^2 \equiv -m^2 \pmod 3 \\
4^c \equiv 1 \pmod 3 \\
2024 \equiv 2 \pmod 3
\end{eqnarray} \right. \tag{6}
```
ブラウザ依存性は少しある。分断される個所が違うが大勢に変わりない。
3.2 PlantUML の Latex を用いた場合
だがしかし，PlantUML の Latex を用いると綺麗に繋がるのだ。
```plantuml
@startlatex
\left\{ \begin{eqnarray} a! \equiv 0 \pmod 3 \\ -4m^2 \equiv -m^2 \pmod 3 \\ 4^c \equiv 1 \pmod 3 \\ 2024 \equiv 2 \pmod 3 \end{eqnarray} \right.
@endlatex
```
PlantUML の Latex を用いた場合の課題
- 薄いグレーの枠線で囲まれてしまう。
- 数式ブロックが左揃えになり，中央揃いにはできない。
- 数式番号
\tag{6}が使えない。 - 一行で書かなくてはならない。複数行に分けるとエラーになる。
3.3 PlantUML の Latex を用いた場合その２
PlantUML の UML 内に <latex> タグで記入することもできる。この場合は少しだけ複数行に分けて書くことができる。ただし，\end{eqnarray} の前に改行コードを入れるとエラーになる。
```plantuml
@startuml
<style>
root {
margin 0
padding 0
}
</style>
title
<latex>
\left\{ \begin{eqnarray}
a! \equiv 0 \pmod 3 \\
-4m^2 \equiv -m^2 \pmod 3 \\
4^c \equiv 1 \pmod 3 \\
2024 \equiv 2 \pmod 3 \end{eqnarray} \right.
</latex>
end title
@enduml
```
PlantUML の Latex を用いた場合その２の課題
- 薄いグレーの枠線で囲まれてしまう。
- 数式ブロックが左揃えになり，中央揃いにはできない。
- 数式番号
\tag{6}が使えない。 - 複数行に分けて書けるが，改行を入れるとエラーになる場所もある。
- 余分な余白を削るためのスタイル設定
<style>の記入が面倒。
3.4 PlantUML の ASCII Math を用いた場合
コード量を少なくするという点では同じ PlantUML の ASCII Math を使う方法もある。なお，PlantUML では ASCII Math のスクリプトを Latex にコンバートしているだけなので，Latex で表現できないことは ASCII Math でもできない。
```plantuml
@startmath
{(a! -= 0, ("mod 3")), (-4m^2 -= -m^2, ("mod 3")), (4^c -= 1, ("mod 3")), (2024 -= 2, ("mod 3")):}
@endmath
```
PlantUML の ASCII Math を用いた場合の課題
- 薄いグレーの枠線で囲まれてしまう。
- 数式ブロックが左揃えになり，中央揃いにはできない。
- 数式番号
\tag{6}が使えない。 - 一行で書かないといけない。複数行に分けるとエラーになる。
- Latex に慣れた人が新たに ASCII Math の文法を覚えるのも大変。
4. 数式番号の上下方向の位置ずれ。
サンプルが掲示されていないので過去の自分の記事から引用するが，式番号$(7)$が最後の行（５行目）の横に並ばないで少し上にずれているというか，むしろ４行目のほうが近い。
\begin{align}
\tau_s &= \int d\tau_s \\
&= \int_{-\pi}^{\pi} \frac{GM_s}{R_e^3} \cdot \mu \cdot r_p^3 \cos^2 \phi \sin 2 \varepsilon \cdot d\phi \\
&= \frac{GM_s}{R_e^3} \cdot \mu \cdot r_p^3 \sin 2 \varepsilon \int_{-\pi}^{\pi} \cos^2 \phi \cdot d\phi \\
&= \frac{GM_s}{R_e^3} \cdot \mu \cdot \pi \cdot r_p^3 \sin 2 \varepsilon \\
&= \frac{2GM_s}{3R_e^3} \cdot \rho \cdot \pi \cdot r_p^3 \cdot (r_e^2 - r_p^2) \sin 2 \varepsilon \tag{7}
\end{align}
```math
\begin{align}
\tau_s &= \int d\tau_s \\
&= \int_{-\pi}^{\pi} \frac{GM_s}{R_e^3} \cdot \mu \cdot r_p^3 \cos^2 \phi \sin 2 \varepsilon \cdot d\phi \\
&= \frac{GM_s}{R_e^3} \cdot \mu \cdot r_p^3 \sin 2 \varepsilon \int_{-\pi}^{\pi} \cos^2 \phi \cdot d\phi \\
&= \frac{GM_s}{R_e^3} \cdot \mu \cdot \pi \cdot r_p^3 \sin 2 \varepsilon \\
&= \frac{2GM_s}{3R_e^3} \cdot \rho \cdot \pi \cdot r_p^3 \cdot (r_e^2 - r_p^2) \sin 2 \varepsilon \tag{7}
\end{align}
```
ブラウザ依存性は少しあるが大勢に影響ない。
5. 簡単な解決^H^H解消方法
2025年10月28日，Math Render で SVG モードを選択する機能が無効化されたため，本項で紹介している方法は使用できなくなっている。
実はこれらの問題を一発で解消できる方法がある。数式ブロックの右クリックメニューで Math Settings から Math Renderer を選び，CHTML になっていたら SVG に変えてみよう。
以下はすべて Microsoft Edge の画面のスクリーンショットを貼りつけたもの。
インライン数式のベースラインが不揃いになる。
うん，SVG にすればベースラインが揃う。
文字の上の装飾記号の位置が高すぎる。
うん，SVG にすればドットの位置が下がる。いちおう黒板太字も下がる。
大型括弧（場合分けなど）が上下に分断する。
うん，SVG にすれば括弧が綺麗に繋がる。
数式番号の上下方向の位置ずれ。
うん，SVG にすれば式番号 $(7)$ が最後の行（５行目）の横に綺麗に並ぶ。
ただし，この設定変更は自分だけ，当該ブラウザにしか反映・記憶されない。
6. 結論
- MathJax はデータ出力形式を選べるようになっている。このうち CHTML 方式は軽量とされ，一方 SVG 方式はやや重いながらも正確とされている。不具合は CHTML 方式の場合に限定されていること，CHTML 方式のほうが SVG 方式よりもやや縦方向に間延びしている感じがあるので，Qiita のページのスタイルシート設定において，行間隔の設定が MathJax の設定より大きく，不整合が生じているのではないかと考えられる。このスタイルシート設定をいまさら修正するのは，他のページ表示にも影響を及ぼしうるので容易に決断できない，要するに無理だろう。ブラウザ依存性もあるのでテストが大変だ。
- 手軽な対策として，自分だけで良いのなら Math Settings の Math Renderer において，SVG 方式を選択すること。ただ，自分だけにしか綺麗に見えないというのも悲しい。閲覧者に SVG 方式を選択するようお願いしても皆やってくれないだろう。
- 数式番号を振れないなどの課題があるが，PlantUML の Latex もしくは ASCII Math を使うという代替手段もあることはある。ただし，数式ブロックにしか適用できず，インライン数式には適用できない。これは Qiita 運営が対応してくれない場合の最終手段，あるいは対応してくれるまでの暫定手段であろう。
- Qiita 運営に依頼するとしたら，MathJax のデフォルト出力形式を CHTML から SVG 形式に変えて貰うことか。ただし，これも今まで問題なく見られていたページ表示に影響を及ぼす可能性があるので容易に決断できないだろう。何より重くなるのがネックである。であれば，記事の作者が MathJax のデフォルト出力形式を選択できるようにできないだろうか？
7. 仕様案
copilot に相談したら，下記のような仕様を提案してきた。
Qiita の記事の markdown を直接見ると冒頭に下記のようなメタデータが書き込まれており，ここに MathJax のデフォルト出力形式を追加する。ただし，従来との互換性のために mathjax_output が未定義の場合は CHTML 形式とみなす。
---
title: Qiita の数式表現 MathJax のおかしな点を直せるか？
tags: MathJax ASCIIMath LaTeX PlantUML
author: TETSURO1999
slide: false
mathjax_output: svg
---
とはいっても流石にメタデータを直接ユーザーに編集させる訳ではなく，記事の編集画面に MathJax のデフォルト出力形式として CHTML または SVG を選択できるボタンを追加する。
8. 参考文献
9. 警告 2025年10月19日追記
2025年10月28日，Math Render で SVG モードを選択する機能が無効化されたため，本項で紹介している不具合は発生しなくなった。
MathJax のデータ出力形式を SVG に切り替えると思わぬ不具合が発生することが判明し，改めて注意喚起を行いたい。一例として下記のように MathJax を用いた記事を作成したとする。
いったん編集作業を終えると下記のようになる。この時点での表示形式は CHTML 方式となっている。
次に数式部分を右クリックしてコンテキストメニューを呼び出し，表示形式を SVG に切り替える。数式部分のベースラインが多少変わるが，この時点で異常はない。
次に編集画面に戻ると，なぜかインライン数式記号の $ とスペースが消えてしまうのだ。なお下記は Mozilla Firefox の例である。
書き換えられる内容はブラウザによっても異なり，下記は Microsoft Edge の例である。コチラはインライン数式記号 $ に加えて \boldsymbol 指定まで消えてしまっている。
すなわち出力形式を SVG 方式のまま編集作業を行うと，記事原稿の Markdown が書き換えられてしまうという深刻な不具合が発生するのだ。