WordPress 上で数式を書く（Katex）

WordPressの記事上で数式を書く方法です。KatexはMathJaxよりも軽快に描画されるらしいという話を見かけたので、今回はKatexを使うことにします。WordPressにはKatexを使えるようになるプラグインがいくつかありますが、今回はプラグインなしでできる方法を使います。

CDN で配信されているスクリプトを埋め込む

Katexは自身のサーバにインストールして使う方法以外に、インストールを必要とせずWebページにコードを埋め込むだけで使える方法があります。具体的には、CDNで配信されているスクリプトを読み込むコードを、WordPressの投稿内に埋め込むということになります。
以下の1つ目のコードはデフォルト設定のコードですが、2つ目のコードのようにオプションで変更することもできます。特に数式であることを示すために数式の左右を囲うdelimitersオプションは要チェックです。

Auto-render Extension
Options

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"
    onload="renderMathInElement(document.body);"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
            // ...options...
        });
    });
</script>

delimitersを特に指定しない場合はデフォルトで以下が設定されます。

[
  {left: "$$", right: "$$", display: true},
  {left: "\\(", right: "\\)", display: false},
  {left: "\\[", right: "\\]", display: true}
]

上記のコードを投稿内に埋め込むだけで数式を記述できるようになります。埋め込む場所としては基本的にはどこでも良さそうですが、WordPressでWebサイトを作成している場合は、カスタムHTMLウィジェットとして埋め込むのが手軽です。
例えば「【初心者向け】WordPressでKatexをプラグイン無しで使う：ウィジェットにコードを挿入して解決」では、「コンテンツ下部」のウィジェットに埋め込んで動作しています。

以下も同様な例ですが「サイドバー」に埋め込んでいます。これでも問題なく動作します。元々サイドバーにウィジェットを並べているタイプのレイアウトだったので、そこにカスタムHTMLウィジェットを1つ追加しコードを記入しています。

「外観」→「カスタマイズ」→「ウィジェット」→「サイドバー」→「＋ウィジェットを追加」。
タイトルは空欄にします。タイトルを書くとそのタイトル文字だけがWebページ上に表示されて不自然になってしまいます。

以上の設定を一度行えば、あとは投稿内で数式を記述できます。投稿のたびに上記設定を繰り返す必要はありません。

数式を使用した投稿の例

こんな感じになります。

（参考）WordPress の数式プラグイン

今回は使いませんでしたが、WordPressの数式プラグインには以下のようなものがあります。

• Jetpack, Beautiful Math with LaTeX
  • Jetpackにも数式機能が含まれており、プラグインの設定で数式機能をONにすることで投稿内で数式を記述できます。
  • 書き方：　$latex ...$
• KaTeX
  • 専用ブロック内ではプレビューが表示されるので便利です。
  • 書き方：　[katex]...[/katex] または専用ブロック
• WP-KaTeX
  • 書き方：　[latex]...[/latex]
• WP Githuber MD – WordPress Markdown Editor, Githuber MD – KaTeX – TeX Math Rendering
  • Markdownで投稿するためのプラグインですが、プラグインの設定でKatex機能をONにすることでMarkdown内で数式を記述できます。ただ、投稿画面がMarkdown用のレイアウトになってしまうため、単にKatex数式だけを使いたい場合には過剰なプラグインかもしれません。
  • 書き方：　Markdown内で
    ```katex
...
```