WordPressでの数式入力・表示の決定版【KaTeX】

WordPressにおいて数式を表示・入力するための最適解は、レンダリング速度に優れるKaTeXプラグインを導入し、さらにショートコードを簡略化するスクリプトを追加することである。

数学のブログを書こうと決めて数式を書き始めた当初、納得できる入力方法やWeb表示の方法が定まらなかった。しかし、最終的に最適な構成が決まったため、その手法を整理する。

結論の構成

KaTeXプラグインに対してショートコード変更スクリプトを追加することで、以下の構成を実現した。

Web表示: KaTeXを利用（レンダリング速度重視）
入力手法: KaTeXプラグインを利用

なぜKaTeXで表示するのか

WordPressでブログサイトを構築する際、数式表示に関する検索結果としてはMathJaxが多く見受けられる。しかし、検証の結果、KaTeXの方がレンダリングが速いことが判明した。（最大の理想は、数式部分をサーバ側で事前に静的化して表示させることである。）

なぜKaTeXプラグインで入力するのか

このプラグインの最大の特徴は、KaTeXブロック（ディスプレイスタイル）に入力した数式がエディタ上でリアルタイムに表示される点である（インラインスタイルでは表示されない）。この視認性の高さが採用の理由である。

ショートコードが長い問題を解決する

KaTeXでの数式表示において、インラインスタイルのために [katex]~[/katex] を大量に入力するのは非常に手間である。Simple MathJaxやLaTeXなどのように、ドルマーク（ $ ~$ ）で入力できるのが望ましい。

これを解決するため、以下のスクリプトを追加することとした。（KaTeX公式のリファレンスはこちら。下記コードは delimiters 配列内から2行を削除し最適化している。）

<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
          // customised options
          // • auto-render specific keys, e.g.:
          delimiters: [
              {left: '$$', right: '$$', display: true},
              {left: '$', right: '$', display: false}
          ],
          // • rendering keys, e.g.:
          throwOnError : false
        });
    });
</script>

これにより、長いショートコードをドルマークで簡略化することが可能となる。ディスプレイスタイルもドルマーク2つ（$$）で入力可能である。ただし、この記述方法で改行を行うと数式が正しく表示されなくなるため、改行を伴うような長い数式を入力する場合は、標準のKaTeXブロックを使用するべきである。

CSSの設定による調整

日本語フォントの調整とモバイル対応

数式内に含まれる日本語のフォントに違和感があったため、CSSで対応を追加した。また、モバイル環境での表示を考慮し、長い数式は横スクロールで表示できるように設定した。

/* KaTeXの日本語フォント設定 */
/* 本文のフォントと一致させる */
.cjk_fallback {
  font-family: var(--cocoon-default-font);
  font-size: var(--cocoon-default-text-size);
}

/* KaTeXブロックのモバイル表示対応 */
/* 画面からはみ出すときは横スクロールを表示する */
.katex-html {
  overflow-y: hidden;
  overflow-x: auto;
}

インライン数式の余白調整

行内数式（インラインスタイル）と前後の日本語テキストの間隔が狭く感じられたため、数式の前後に自動でスペースが挿入されるよう調整した。

/* 行内数式の前後にスペースを入れる */
span.katex::before, span.katex::after {
  content: " ";
}

まとめ

WordPressでの数式表示は、レンダリングが高速なKaTeXプラグインが最適である。
スクリプトを追加することで、面倒なショートコードを省略し、LaTeX標準の $ や $$ で直感的に入力可能になる。
CSSを追加設定することで、日本語フォントの統一やモバイル環境での横スクロールなど、閲覧性を向上させることができる。

他の記事を探す