Mathjaxを残してKaTeXを新たに導入

サイトの表示速度の高速化に最近力をいれていますが,数式を書くことが多くなってきたので,数式も高速化することにしました

以前まではMathJaxを使っていまいたが,表示にかなり時間がかかるので,KaTeXを使うことにしました

比較しやすいようにページ先頭のここに数式を書きますが,かなり差が出ることがわかります(再読み込みしてみて下さい)

MathJaxでは数秒かかる一方で,KaTeXではページに既に張り付いていたかのようです

MathJax

\begin{align} \left[ \begin{array}{c} \dot{I}_a \\ \dot{I}_b \\ \dot{I}_c \end{array} \right] &= \left[ \begin{array}{c} 1&1&1\\ 1&a^2&a\\ 1&a&a^2\\ \end{array} \right] \left[ \begin{array}{c} \dot{I}_0 \\ \dot{I}_1 \\ \dot{I}_2 \end{array} \right]\tag{1.1} \end{align}

KaTeX

\begin{aligned} \left[ \begin{array}{c} \dot{I}_a \\ \dot{I}_b \\ \dot{I}_c \end{array} \right] &= \left[ \begin{array}{c} 1&1&1\\ 1&a^2&a\\ 1&a&a^2\\ \end{array} \right] \left[ \begin{array}{c} \dot{I}_0 \\ \dot{I}_1 \\ \dot{I}_2 \end{array} \right]\\\tag{1.1} \end{aligned}

KaTeXの導入

MathJaxのコードが残っていても表示されるようにしたいので,七誌様の記事で公開されているコードの一部をheadに追加しました

実際に数式を挿入するときは,"math-render"とdivのclassを指定することで,MathJaxとは別にKaTeXで指定させることができるようになっています

7shi.hateblo.jp

このままでは数式が大きすぎるので,CSSに次のコードを追加しました

!important; とつけないと反映されません

.katex { font-size: 1em !important; }

挿入方法の比較

インラインモード

MathJax

なお,記事中の\(\dot{V}_i\,(i=a,b,c)\)は各相の端子電圧,\(\dot{E}_i\,(i=a,b,c)\)は発電機の各相の相電圧,\(\dot{I}_i\,(i=a,b,c)\)は各相の線電流を表している

<p>なお,記事中の\(\dot{V}_i\,(i=a,b,c)\)は各相の端子電圧,\(\dot{E}_i\,(i=a,b,c)\)は発電機の各相の相電圧,\(\dot{I}_i\,(i=a,b,c)\)は各相の線電流を表している</p>
KaTeX

なお,記事中の$\dot{V}_i\,(i=a,b,c)$は各相の端子電圧,$\dot{E}_i\,(i=a,b,c)$は発電機の各相の相電圧,$\dot{I}_i\,(i=a,b,c)$は各相の線電流を表している

<p>なお,記事中の$\dot{V}_i\,(i=a,b,c)$は各相の端子電圧,$\dot{E}_i\,(i=a,b,c)$は発電機の各相の相電圧,$\dot{I}_i\,(i=a,b,c)$は各相の線電流を表している</p>

ディスプレイモード

MathJax
\begin{equation} \left\{ \begin{aligned} \dot{V}_b&=\dot{V}_c=0 \\ \dot{I}_a&=0 \end{aligned} \right.\tag{1.1} \end{equation}
<div class="math display">
\begin{equation}
    \left\{
    \begin{aligned}
         \dot{V}_b&=\dot{V}_c=0 \\
         \dot{I}_a&=0 
    \end{aligned}
    \right.\tag{1.1}
\end{equation}
</div>
KaTeX
\begin{aligned} \left\{ \begin{aligned} \dot{V}_b&=\dot{V}_c=0 \\ \dot{I}_a&=0 \end{aligned} \right.\tag{1.1} \end{aligned}
<div class="math-render">
\begin{aligned}
    \left\{
    \begin{aligned}
         \dot{V}_b&=\dot{V}_c=0 \\
         \dot{I}_a&=0 
    \end{aligned}
    \right.\tag{1.1}
\end{aligned}
</div>

KaTeXの注意点

  • amp版では表示されない

amp版とはスマホなどのモバイル端末でも快適に読めるように自動で機能が減らされて配信されているページのことで,スマホで読もうとすると大体amp版になってしまう

そのamp版では数式を表示する機能が無いらしく,この記事の最上部に書いたように,URLをamp=0としてもらう必要がある

ならampを配信しなければいいじゃないかって話になるけど,このブログはアクセス数の2割がampから来ていて,ampを配信し始めてからアクセス数が急増したし配信をやめることはしたくない

数式が含まれる記事は2割程度なので読者に指定してもらう方針

  • align,equationは使えない

  • alignedを使う

  • テキストは\text{}で

  • インラインモードの数式の両側の$と数式の間は半角スペースをひとつ入れる

半角スペースを入れないと数式として認識してくれないことがあります

  • 一つのdiv領域で\tag{}は1回まで

途中式にtagを付けた直後で下のようなコードを挿入して分ける

上下ずれるけど,そのあたりは仕方ない????

\end{aligned}
</div>
<div class="math-render">
\begin{aligned}

改行した式中で\tag{}を使うと\alingedの仕様上,全体の真ん中あたりにタグが付くので注意

  • 改行の\\が\と読み込まれることがある

下のようなエラーが出る

f:id:monhime:20200110215909p:plain:w500

このときは\\\と3本打つと正常に読み込まれる


こちらのページでは使える関するリストなどの注意点がまとめられていて参考になります

KaTeXを導入しました | TeX | Kengo Nagashima - The Institute of Statistical Mathematics

速度の比較

数式で埋め尽くされている下の記事の速度を,GTmetrixを使って比較してみました

対称座標法#8 一相地絡故障(直接地絡,インピーダンス接地) - チャーターブログ

全てMathjaxの場合

f:id:monhime:20200110110857p:plain:w500

全てKaTeXの場合

速くなりました

Fully Loaded Timeと書いてあり,数式が表示される時間は含まれていないのかもしれませんが,どちらにしても速くなったのは確かです

f:id:monhime:20200110114944p:plain:w500

おわりに

今までMathJaxで書いていたコードを全てKaTeXに置き換えたので,MathJaxのhtmlコードを削除しました

今後はKaTeXのみで書く予定です

MathJax→KaTeXの移行は,下の文字列を検索し,ヒットした記事の文章をエディタにコピペし検索・置換した上で適宜書き換えました

  • "math display"
  • {equation}
  • {align}
  • [
  • ]
  • (
  • )
  • [tex: