pukiwiki/数式プラグイン/KaTeX のバックアップ(No.4)

MathJax よりもずっと早いらしいです †

MathJax と同様に、html 中に書かれた TeX ソースを javascript でレンダリングしてくれるライブラリなのですが、 いろいろ制限はあるもののずっと軽く動作するとの評判です。

https://khan.github.io/KaTeX/

pukiwiki に組み込む †

ソースファイル：

LANG:php
<?php
//
// pukiwiki用 数式プラグイン (katex.inc.php)
//   Copywrite 2018 Osamu Takeuchi <osamu@big.jp>
//
// [履歴]
//   2018.07.02 初期リリース
//
// [インストール]
//   ソースファイルを (pukiwiki)/plugin/katex.inc.php として保存
//
// [使い方]
//   #katex; として一回呼んでおくと、その後の TeX ソース内に
//   記述された katex 形式の tex ソースを katex で処理する
//   ようになる
//

function plugin_katex_header()
{
    return <<<'EOS'
<link href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" integrity="sha256-tkzDFSl16wERzhCWg0ge2tON2+D6Qe9iEaJqM4ZGd4E=" crossorigin="anonymous" type="text/css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js" integrity="sha256-gNVpJCw01Tg4rruvtWJp9vS0rRchXP2YF+U+b2lp8Po=" crossorigin="anonymous" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/contrib/auto-render.min.js" integrity="sha256-ExtbCSBuYA7kq1Pz362ibde9nnsHYPt6JxuxYeZbU+c=" crossorigin="anonymous" type="text/javascript"></script>
<script>
  document.addEventListener("DOMContentLoaded", function(){
    renderMathInElement(
      document.body,
      {
        delimiters: [
          {left: "$$", right: "$$", display: true},
          {left: "$", right: "$", display: false}
        ],
        ignoredTags: [
          "script",
          "noscript",
          "style",
          "textarea",
          "pre",
          "code"
        ]
      }
    );
  });
</script>
EOS;
}

function plugin_katex_convert()
{
    return plugin_katex_inline();
}

function plugin_katex_inline()
{
    $header = "";
    if (!defined("PLUGIN_KATEX_LOADED")) {
        define("PLUGIN_KATEX_LOADED", "LOADED");
        $header = plugin_katex_header();
    }

    $aryargs = func_get_args();
    $math = join(",", $aryargs);
    $math = rtrim($math, ",");  //remove extra comma at the end.
    $math = htmlspecialchars($math);

    if($math===""){
        return $header;
    }else{
        return $header . "\\(\\displaystyle\\begin{split}" . $math . "\\end{split}\\)";
    }
}

?>

使い方 †

pukiwiki の個別ページのソースファイルに

#katex

と書けば、そのページの

$y=ax^2+bx+c$

や

$$
y=ax^2+bx+c
$$

を、$y=ax^2+bx+c$ や

$$ y=ax^2+bx+c $$

のように表示してくれます。

$$
  y=ax^2+bx+c
$$

 y=ax^2+bx+c

使えない記法や、おかしな動作がまだ残っている †

徐々に改善されてきてますが、たまに動作のおかしなところを踏んでしまうことがあるようです？

気づいたらここにメモろうと思います。

とはいえ、ずいぶん使えるようになってきているので、 新しく書くページから徐々に KaTeX に移行しようかと思います。

\hbar が太い †

\hbar と書くと h に比べて太くなって、ベクトルと見分けづらい。

h に ダッシュ を重ね打ちするマクロを定義すれば同じ太さで書けそう。

LANG:javascript
       macros: {
         "\\hbar": "h\\mathllap{\\raisebox{3pt}{--\\hspace{0.2pt}}}"
       }

あら、これだとフォントサイズが変わるとずれちゃうみたい。

LANG:javascript
       macros: {
         "\\hbar": "h\\mathllap{{}^-}"
       }

だと何とかそれらしい感じだ。

LANG:css
.katex-display > .katex {
  text-align: left !important;
  padding-left: 14px;
}

LANG:css
.katex {
  font-size: 1.1em;
}

$$
\int_0^\infty \bigl\{rR_n{}^l(r)\bigr\}^*\bigl\{rR_{n'}{}^l(r)\bigr\}\,dr=\delta_{nn'}
$$

これ、かなり良い感じ †

これらを比べると、KaTex で表示にかかる時間はサーバーサイド変換と比べてほとんど遜色なく、 ダウンロード時間を考えるとむしろ早い。仕上がりもほぼ問題ないレベル。

ただ別途、フォントや js, css をダウンロードしなければならないので、 初回アクセスでは時間がかかるかも。

MathJax が数式を多く含むページを表示するのに 8 秒とかかかるのはさすがに実用性に乏しい。 ＰＣでこれだとモバイル端末では酷いことになりそう。

コメント・質問 †