WebサイトでのLaTeXレンダリング（MathJaxやKaTeXなど）の検証ですね。表示の崩れやフォントの適用、数式の折り返しなどを確認するために、「シンプル」から「超複雑」までのテスト用コードをまとめました。
コピー＆ペーストして、ご自身のサイトで正しく表示されるか試してみてください。
1. インライン数式（文中での表示）
文中の文字と数式の高さが揃っているか、行間が広がりすぎていないかを確認します。
- コード:
アインシュタインの相対性理論において、エネルギー $E$ は $E = mc^2$ で表されます。 - 期待される表示: アインシュタインの相対性理論において、エネルギー $E$ は $E = mc^2$ で表されます。
2. 基本的な演算・分数・根号
基本的な記号が正しく描画されるかのテストです。
- コード:
コード スニペット
$$ \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$
- 期待される表示:$$\frac{-b \pm \sqrt{b^2 – 4ac}}{2a}$$
3. 総和・極限・積分（大型演算子）
上下の添え字（Limits）が正しい位置にあるか確認します。
- コード:
$$ \lim_{n \to \infty} \left( 1 + \frac{1}{n} \right)^n = e $$
$$ \sum_{k=1}^{n} k = \frac{n(n+1)}{2} $$
$$ \int_{a}^{b} f(x) \, dx = F(b) - F(a) $$
4. 行列（Matrix）
括弧のサイズが中身に合わせて自動調整されるかを確認します。
5. 場合分け（Cases）とテキスト
数式内に日本語やテキストが含まれる場合の挙動を確認します。
- コード:
コード スニペット
$$
f(n) = \begin{cases}
n/2 & \text{if } n \text{ is even} \\
3n+1 & \text{if } n \text{ is odd}
\end{cases}
$$
6. 物理・高度な数式（ストレス・テスト）
非常に複雑な構造が崩れないかチェックするための「ラスボス」級の数式です。
- マクスウェル方程式（コード）:
コード スニペット
$$
\begin{aligned}
\nabla \cdot \mathbf{D} &= \rho \\
\nabla \cdot \mathbf{B} &= 0 \\
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
\nabla \times \mathbf{H} &= \mathbf{J} + \frac{\partial \mathbf{D}}{\partial t}
\end{aligned}
$$
検証時のチェックポイント
表示された数式を見て、以下の点に違和感がないか確認してみてください。
- フォントの欠け: 記号（$\sum$ や $\int$）が「豆腐（□）」になっていないか。
- 垂直方向のズレ: 分数や添え字が極端に上下にズレていないか。
- レスポンシブ対応: スマホ画面で数式がはみ出した際、横スクロールができるか、あるいは自動で縮小されるか。
- 色の反映: CSSで文字色を変えた場合、数式の色も変わるか（ライブラリの設定によります）。
もし特定の数式が崩れる場合は、使用しているライブラリ（MathJax v3など）の設定を見直す必要があるかもしれません。
次に、ダークモード対応のための数式の色の変え方や、特定のライブラリ（KaTeXなど）向けの軽量なコードが必要であれば作成しましょうか？
コメント