WordPressで数式を書きたい！
数式はインラインでもかけます。3/4ではなく \({\Large\frac{3}{4}}\) です。2次方程式の解の公式は \(x = \frac{-b \pm \sqrt{b^2 – 4ac}}{2a}\) です。
$$x = \frac{-b \pm \sqrt{b^2 – 4ac}}{2a}$$
\[\sin^2 \theta + \cos^2 \theta = 1\]
ということで、WordPressにLaTeX記法を導入する方法をメモ
MathJax
まずはMathJaxというJavaScriptライブラリ。これは、MathJax-LaTeXというWordPressプラグインで簡単導入できます。
これを投入した後、
[mathjax]というショートコードに続けて数式を書くだけ。こんな感じ
[mathjax]
$$\begin{pmatrix} X \\ Y \\ Z \end{pmatrix}=\begin{pmatrix} 2.7688 & 1.7517 & 1.1301 \\ 1.0000 & 4.5906 & 0.060067 \\ 0.0000 & 0.056507 & 5.5942 \end{pmatrix}\begin{pmatrix} R_{\mathrm{CIE}} \\ G_{\mathrm{CIE}} \\ B_{\mathrm{CIE}} \end{pmatrix}\tag{1}$$私もこれを長らく使っていました。
ですが、処理が重い。ということで、「KaTeX」というJavaScriptライブラリを導入しました。厳密にはLaTeXではないらしいのですが、記事サイトnoteでも数式記入の仕組みに採用されてるので、noteに合わせるということで。
KaTeX
参考サイト1
参考サイト2
参考サイト3
WordPressプラグインで簡単投入できればいいんですが、どうやらKaTeXプラグインは存在するものの、かなり古い。まあべつにプラグイン入れるまでもないので、直接コードを書きます。
私は、参考サイトの人とおなじように、Cocoonというテーマを使ってます。なので、Cocoon Child: head-insert.php (tmp-user/head-insert.php)に下記コードを挿入。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.15/dist/katex.min.css" integrity="sha384-Htz9HMhiwV8GuQ28Xr9pEs1B4qJiYu/nYLLwlDklR53QibDfmQzi7rYxXhMH/5/u" crossorigin="anonymous">
<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.15/dist/katex.min.js" integrity="sha384-bxmi2jLGCvnsEqMuYLKE/KsVCxV3PqmKeK6Y6+lmNXBry6+luFkEOsmp5vD9I/7+" crossorigin="anonymous"></script>
<!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.15/dist/contrib/auto-render.min.js" integrity="sha384-hCXGrW6PitJEwbkoStFjeJxv+fSOOQKOPbJxSfM6G5sWZjAyWhXiTIIAmQqnlLlh" crossorigin="anonymous"
onload="renderMathInElement(document.body);"></script>なので下記のようになります。
<?php
//ヘッダー部分（<head></head>内）にタグを挿入したいときは、このテンプレートに挿入（ヘッダーに挿入する解析タグなど）
//子テーマのカスタマイズ部分を最小限に抑えたい場合に有効なテンプレートとなります。
//例：<script type="text/javascript">解析コード</script>
?>
<?php if (!is_user_administrator()) :
//管理者以外カウントしたくない場合は
//↓ここに挿入?>
<?php endif; ?>
<?php //ログインユーザーも含めてカウントする場合は以下に挿入 ?>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.15/dist/katex.min.css" integrity="sha384-Htz9HMhiwV8GuQ28Xr9pEs1B4qJiYu/nYLLwlDklR53QibDfmQzi7rYxXhMH/5/u" crossorigin="anonymous">
<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.15/dist/katex.min.js" integrity="sha384-bxmi2jLGCvnsEqMuYLKE/KsVCxV3PqmKeK6Y6+lmNXBry6+luFkEOsmp5vD9I/7+" crossorigin="anonymous"></script>
<!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.15/dist/contrib/auto-render.min.js" integrity="sha384-hCXGrW6PitJEwbkoStFjeJxv+fSOOQKOPbJxSfM6G5sWZjAyWhXiTIIAmQqnlLlh" crossorigin="anonymous"
onload="renderMathInElement(document.body);"></script>
コードは、KaTeX公式サイト（参考サイト3）からコピペです。
これで、
$$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$のようにドルドルで挟むか、
\[x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}\]のようにエスケープ角カッコで数式になります。
インライン数式にしたければ
数式\(x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}\)です。のように、エスケープ丸カッコで書けます。
ちなみに、複数行にわたる場合は、エスケープを2回書かないといけません。あと、コードが複数行になるとうまくいかない？ので一行で書くようにしましょう。
数式例
WordPressで数式\(x = \frac{-b \pm \sqrt{b^2 – 4ac}}{2a}\)を書きたい！
$$x = \frac{-b \pm \sqrt{b^2 – 4ac}}{2a}$$
\[\sin^2 \theta + \cos^2 \theta = 1\]
$$\mathbf{A} = \begin{bmatrix} 1 & 2 & 3 \\ 4 & 5 & 6 \\ 7 & 8 & 9 \end{bmatrix}$$
$$\begin{pmatrix} X \\ Y \\ Z \end{pmatrix}=\begin{pmatrix} 2.7688 & 1.7517 & 1.1301 \\ 1.0000 & 4.5906 & 0.060067 \\ 0.0000 & 0.056507 & 5.5942 \end{pmatrix}\begin{pmatrix} R_{\mathrm{CIE}} \\ G_{\mathrm{CIE}} \\ B_{\mathrm{CIE}} \end{pmatrix}\tag{1}$$
$$\begin{pmatrix} R_{\mathrm{CIE}} \\ G_{\mathrm{CIE}} \\ B _{\mathrm{CIE}}\end{pmatrix}=\begin{pmatrix} 0.41847 & -0.15866 & -0.082835 \\ -0.091169 & 0.25243 & 0.015708 \\ 0.00092090 & -0.0025498 & 0.17860 \end{pmatrix}\begin{pmatrix} X \\ Y \\ Z \end{pmatrix}\tag{2}$$
\[\lim_{x \to 0} (1+x)^{\frac{1}{x}} = e \]
$$\mathbf{a} \cdot \mathbf{b} = |\mathbf{a}| |\mathbf{b}| \cos \theta$$
$$P(A \cap B) = P(A)P(B)$$
\[\frac{\mathrm{d}y}{\mathrm{d}x} = 3x^2 + 2x + 1\]
\[\int_0^1 x^2 \, \mathrm{d}x = \frac{1}{3}\]
$$\ket{\Psi} = \ket{\mathbf{r}} \otimes \ket{\uparrow} \quad \text{or} \quad \ket{\Psi} = \ket{\mathbf{r}} \otimes \ket{\downarrow}$$
\[ c = \pm\sqrt{a^2 + b^2} \]
コメント