ブログやwebページで数式を記載方法として、MathJaxでの記載方法について解説します。
wordpressの場合も使用可能です。
表示環境として、chrom,safari,egeでは表示されることを確認しています（2022年4月現在）
目次
サンプル
以下のような数式がhtmlで記述可能になります。
表示結果
飽和蒸気圧力から飽和蒸気温度の算出式
\[ \begin{pmatrix} n_1 \\ n_2 \\ n_3 \\ n_4 \\ n_5 \\ n_6 \\ n_7 \\ n_8 \\ n_9 \\ n_{10} \\ \end{pmatrix} = \begin{pmatrix} 1.1670521 \times 10^3 \\ -7.2421317 \times 10^5 \\ -1.7073847 \times 10^1 \\ 1.2020825 \times 10^4 \\ -3.2325550 \times 10^6 \\ 1.4915109 \times 10^1 \\ -4.8232657 \times 10^3 \\ 4.0511341 \times 10^5 \\ -2.3855558 \times 10^{-1} \\ 6.5017535 \times 10^2 \\ \end{pmatrix} \]\[ β = \left(\frac{Ps}{P^*}\right)^{\frac{1}{4}} \] \[ E = β^2 + n_3β + n_6 \] \[ F = n_1β^2 + n_4β + n_7 \] \[ G = n_2β^2 + n_5β + n_8 \] \[ D = \frac{2G}{-F-\sqrt{F^2-4EG}} \]
\[ Ts = T^*\frac{n_{10}+D-\left[\left(n_{10}+D\right)^2 – 4 \left(n_9+n_{10}D\right)\right]^{\frac{1}{2}}}{2} \]
コード
<div class='box1'>
<p>飽和蒸気圧力から飽和蒸気温度の算出式</p>
\[
\begin{pmatrix}
n_1 \\ n_2 \\ n_3 \\ n_4 \\ n_5 \\
n_6 \\ n_7 \\ n_8 \\ n_9 \\ n_{10} \\
\end{pmatrix}
=
\begin{pmatrix}
1.1670521 \times 10^3 \\
-7.2421317 \times 10^5 \\
-1.7073847 \times 10^1 \\
1.2020825 \times 10^4 \\
-3.2325550 \times 10^6 \\
1.4915109 \times 10^1 \\
-4.8232657 \times 10^3 \\
4.0511341 \times 10^5 \\
-2.3855558 \times 10^{-1} \\
6.5017535 \times 10^2 \\
\end{pmatrix}
\]
<br>
\[ β = \left(\frac{Ps}{P^*}\right)^{\frac{1}{4}} \]
\[ E = β^2 + n_3β + n_6 \]
\[ F = n_1β^2 + n_4β + n_7 \]
\[ G = n_2β^2 + n_5β + n_8 \]
\[ D = \frac{2G}{-F-\sqrt{F^2-4EG}} \]
<br>
\[ Ts = T^*\frac{n_{10}+D-\left[\left(n_{10}+D\right)^2 - 4 \left(n_9+n_{10}D\right)\right]^{\frac{1}{2}}}{2} \]
</div> 準備
headタグを編集
headタグに以下のコードを入れます。
<header>
.....
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
.....
<\header>wordpressの場合
“header.php” を編集
wordpressの場合、 “header.php” を編集します。編集箇所は以下の通り。
wordpress管理画面 ⇒⇒ 外観 ⇒⇒ テーマファイルエディタ ⇒⇒ “header.php”
header.phpの最初にある<head>タグの間に上記と同じコードをコピペします。
※一般的に、the thorのようなwordpressテーマのheader.phpの直接カスタマイズすることは推奨されていません。変更する際には、編集する際には変なところいじらないように気をつけてください。
VS codeをインストール（推奨）
MathJaxをwordpress上で記述するのは、大変なのでVS code（Visual studio Code）のインストールを推奨します。
VS codeに”Live server” という拡張機能をインストールすれば、webページで常にどのように表示されるか確認しながら作業できます。
VS code上である程度形にしてから、wordpressの”カスタムhtml”でそのコードをコピペすると比較的簡単に記述することができます。
記述方法（随時更新）
四則演算
\[ A = B + C \]
\[ A = B - C \]
\[ A = B \times C \]
\[ A = B \div C \]
\[ A = \frac{B}{C} \]
\[ A = B + C \]
\[ A = B – C \]
\[ A = B \times C \]
\[ A = B \div C \]
\[ A = \frac{B}{C} \]
上付き下付き
\[ y = ax^2 + bx + c \]
\[ y = a_0 + a_1x^2 + a_3x^3 + ... \]
\[ y = ax^2 + bx + c \]
\[ y = a_0 + a_1x^2 + a_3x^3 + … \]
三角関数
\[ \sin^2 \theta + \cos^2 \theta = 1 \]
\[ \tan^2 \theta + 1 = \frac{1}{\cos^2 \theta} \]
\[ \sec \theta = \frac{1}{\cos \theta} \]
\[ \csc \theta = \frac{1}{\sin \theta} \]
\[ \cot \theta = \frac{1}{\tan \theta} \]
\[ \arcsin (1) = sin^{-1} (1) = \frac{\Pi}{2} \]
\[ \sinh x = \frac{e^x - e^{-x}}{2} \]
\[ \sin^2 \theta + \cos^2 \theta = 1 \]
\[ \tan^2 \theta + 1 = \frac{1}{\cos^2 \theta} \]
\[ \sec \theta = \frac{1}{\cos \theta} \]
\[ \csc \theta = \frac{1}{\sin \theta} \]
\[ \cot \theta = \frac{1}{\tan \theta} \]
\[ \arcsin (1) = sin^{-1} (1) = \frac{\Pi}{2} \]
\[ \sinh x = \frac{e^x – e^{-x}}{2} \]
対数
\[ \log 10 = 1 \]
\[ \log_2 8 = 3 \]
\[ \ln e = 1 \]
\[ a^x = y \Leftrightarrow x = \log_a y \]
\[ \log_a \frac{y}{x} = \log_a y + \log_a {x} \]
\[ \log 10 = 1 \]
\[ \log_2 8 = 3 \]
\[ \ln e = 1 \]
\[ a^x = y \Leftrightarrow x = \log_a y \]
\[ \log_a \frac{y}{x} = \log_a y + \log_a {x} \]
数列
\begin{eqnarray} \sum_{i=1}^{n} a_i \end{eqnarray}
\begin{eqnarray} \sum_{i=1}^{n} a_i \end{eqnarray}
行列
\begin{pmatrix}
a & b \\
c & d
\end{pmatrix}
\begin{bmatrix}
a & b \\
c & d
\end{bmatrix}
\begin{vmatrix}
a & b \\
c & d
\end{vmatrix}
\begin{pmatrix}
a & b \\
c & d
\end{pmatrix}
\begin{bmatrix}
a & b \\
c & d
\end{bmatrix}
\begin{vmatrix}
a & b \\
c & d
\end{vmatrix}
複合
<p>
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]
</p>When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]
まとめ
随時更新して、だいたいの数式がこのサイトからのコピペでいけてしまうように、アップデート予定です。
ブログ等で数式が書きにくくて、お困りの方は是非ご覧ください。