数学

KaTexを使ってみよう！

  /

こんにちは、MSKです。
今回はKatexというWordpressのプラグインを使ってみます。

このブログの前にも別のブログを運営していました。
しかし、そこで使用していた数式入力の環境のためにブログ全体が遅くなり、試行錯誤を１年ほどつづけたのですが結局ブログを１から作り直すことになりました。

以前のブログではmathjaxをjavascriptから呼んでいました。
headタグの中に書いていた該当するscriptタグを消去すると速度が速くなったので、これが悪さをしていることは分かりました。
しかし、表示速度が悪いことだと気づいた時には、すでにたくさんの記事でたくさん数式を書いていたので、scriptタグ内の処理を消して他の方法にするということは難しかったです。

このブログではjavascriptを使わずにプラグインで数式環境を作ろうと思っています。

これでも表示速度が遅くなったら、途方にくれると思います・・・・

以前の方法

WordPressの外観->テーマエディター->header.phpの</header>の直前に次のコードを書くことでlatex環境を構築していました。

<script type="text/x-mathjax-config">
        MathJax.Hub.Config({
            HTML: ["input/TeX","output/HTML-CSS"],
            TeX: {
                    Macros: {
                    bm: ["\\boldsymbol{#1}", 1]},
                    extensions: ["AMSmath.js","AMSsymbols.js","color.js"],
                    equationNumbers: { autoNumber: "AMS" }
                },
            extensions: ["tex2jax.js"],
            jax: ["input/TeX","output/HTML-CSS"],
            tex2jax: {
                inlineMath: [ ['$','$'], ["\\(","\\)"] ],
                displayMath: [ ['$$','$$']], 
                processEscapes: true
            },
            "HTML-CSS": {
                availableFonts: ["TeX"],
                linebreaks: { automatic: true }
            }
        });
    </script>
    <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML">
    </script>

この方法だと$…$とすると簡単に数式を表示できました。
普通のlatexと同じようにできたのでありがたかったのですが、速度的に圧倒的に遅かったです。

KaTexをインストール

WordPressのプラグイン->新規追加で検索にlatexと入力すると候補の中に出てくると思います。

インストールして有効化します。
有効化できたら設定は終わりです。

使ってみよう！

KaTexをインストールすると専用のブロックが用意されます。
この中でlatexの文を書くと数式が表示されます。
やってみます。

\lim_{x \to 0} (1+x)^{\frac{1}{x}} = e

これは次のように書いています。

\lim_{x \to 0} (1+x)^{\frac{1}{x}} = e

このブロックの良いところは記述途中にも数式のプレビューが表示されることです。
ある程度まとまるところまで書いて間違っている時は数式が表示されないので、すぐに修正が必要なことが分かります。
複雑な数式を書き終わった時に間違いがあり、正常に表示されなかった時はなかなか心が折れるので嬉しい仕様です。

ブロックを使わないインライン記述もできます。
例えば、次のように記述することができます。

定積分\int_{-2}^3 \phi(x) dxを計算しなさい。

これは次のように書いています。

定積分[ katex]\int_{-2}^3 \phi(x) dx[/ katex]を計算しなさい。

※上の表示で[]内のスペースは必要ないです。
　うまく表示できなかったので、スペースを開けています。

インストールする前は「インラインで書けないのでは？」と不安でしたが、インラインでも簡単に書くことができました。

最後に

今回はWordpressで数式を表示する方法としてKaTexプラグインを紹介しました。
KaTexプラグインはインストールして有効化するだけで使えます。
次の２つの方法で使うことができます。

  1. KaTexブロックを使う（プレビューができるがインラインでは使えない）
  2. [ katex]タグで囲む（インラインでも使える）

以上、「KaTexを使ってみよう！」でした。
最後までご覧いただき、ありがとうございました。

ABOUT ME
MSK
九州在住の組み込み系エンジニアです。 2児の父親でもあります。 数学やプログラミングが趣味です。 最近RustとReact、結び目理論と曲面結び目理論にはまっています。
BLOG：https://www.mochinoki-labo.com
RELATED POST