【KaTeX】WordPressにKaTeXを導入する

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

WordPressのテーマのfunctions.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を使用してレンダリングされます．

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

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

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


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

出力：

$x-y$ $ab + cd$

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

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

出力：

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

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

Leave a Reply Cancel reply