【KaTeXの導入】WordPressで美しく数式を表示する方法

KaTeXをWordPressサイトに導入する方法を説明します．

1. WordPressのテーマのfunctions.phpファイルを編集

※　ここでは function.php を直接編集する方法を紹介しますが，必要に応じて子テーマを作成して行なってください．

まず，WordPressにログインし，メニューバーから「外観」＞「テーマファイルエディタ」を開きます．
テーマファイルの中から，「テーマのための関数(functions.php)」をクリック．
以下のコードを「functions.php」の末尾に追加します．
このコードはKaTeXライブラリとスタイルシートをサイトに組み込み，ページの数式を自動的にレンダリングするためのものです．

// KaTeXのスタイルシートとJavaScriptライブラリをWordPressに登録します．
wp_enqueue_style('katex-css', "https://cdn.jsdelivr.net/npm/katex@$katex_version/dist/katex.min.css", array(), $katex_version);
wp_enqueue_script('katex-js', "https://cdn.jsdelivr.net/npm/katex@$katex_version/dist/katex.min.js", array(), $katex_version, true);
// KaTeXの自動レンダリングスクリプトを登録します．このスクリプトは数式を自動的に検出し，レンダリングします．
wp_enqueue_script('katex-auto-render', "https://cdn.jsdelivr.net/npm/katex@$katex_version/dist/contrib/auto-render.min.js", array('katex-js'), $katex_version, true);
// KaTeX用の化学式拡張スクリプトを登録します．これにより、化学式もサポートされます．
wp_enqueue_script('katex-mhchem', "https://cdn.jsdelivr.net/npm/katex@$katex_version/dist/contrib/mhchem.min.js", array('katex-js'), $katex_version, true);
}

// WordPressのスクリプト登録フックに，上記の関数を登録します．
add_action('wp_enqueue_scripts', 'add_katex_scripts_and_styles');

function run_katex_auto_render() {
    ?>
    // ページ読み込み完了後に実行されるスクリプトです．これにより，ページ内の数式がKaTeXを使用してレンダリングされます．
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
          // 数式を文書に対して左寄せにします．
          fleqn: true,
          // レンダリングする数式のデリミタを設定します．
          delimiters: [
            {left: "$$", right: "$$", display: true}, 
            // ディスプレイモード（ブロック表示）
            {left: "\\[", right: "\\]", display: true}, 
            // ディスプレイモードの別の形式
            {left: "$", right: "$", display: false}, 
            // インラインモード
            {left: "\\(", right: "\\)", display: false} 
            // インラインモードの別の形式
          ]
        });
      });
    </script>
    <?php
}

// WordPressのフッターアクションに，数式の自動レンダリング関数を追加します．
add_action('wp_footer', 'run_katex_auto_render');

2. WordPressサイトでKaTeXをテスト

WordPressのエディタで新しいページを開き，KaTeXの数式を追加してみましょう．

インラインモードは，段落中に $...$ ，または$...$で囲みます．

$x - y$
\(ab + cd\)

出力：

$x-y$ $ab + cd$

ディスプレイモードは，段落中に$$...$$，または\[...\]で囲みます．

$$x-y$$
\[ab + cd\]

出力：

$$x-y$$ \[ab + cd\]

これで，WordPressサイトにKaTeX導入完了です！