pukiwiki/数式プラグイン/KaTeX の履歴(No.1)

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: false},
          {left: "$$", right: "$$", display: true}
        ],
        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 $$

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