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
      ...
      ```

コメントを残す