はてぶで数式を書くためのテスト(2) MathJaxを使う
フッターにMathJaxを読み込む設定をして使う
フッターに次のコードを埋め込んでMathJaxを使えるようにしてみた。
<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.0.1/es5/tex-mml-chtml.js"></script> <script> MathJax = { tex: { inlineMath: [['$', '$'], ['\\(', '\\)']], displayMath: [['$$','$$'], ["\\[","\\]"]] } }; </script>
以前は MathJax を使うと表示が遅かった。しかし、ネット環境やPCのスペックにもよるだろうが、今はローディング時に一瞬元のTeXが見える程度ですぐにレンダリングされる。
Markdownを使っている場合は、書かれたLaTeXテキストを<p>や<span>や<div>といったHTMLタグで囲んでやる必要がある。MarkdownではHTMLはそのまま表示されるので、その方法を活かす。
インラインの数式
エネルギーと質量には<span> \(E=mc^2\) </span>の関係がある。
エネルギーと質量には (E=mc2) の関係がある。
数式部分だけを<span>で囲むとなぜか( )が残る。どうしても<span>を使いたければ、文章全体を<p>で囲むのが無難。
<p>エネルギーと質量には<span> \(E=mc^2\) </span>の関係がある。</p>
エネルギーと質量には \(E=mc^2\) の関係がある。
<p>オイラーの公式 \(e^{i\pi}+1=0\) は美の極致である。</p>
オイラーの公式 \(e^{i\pi}+1=0\) は美の極致である。
<p>エネルギーと質量には $E=mc^2$ の関係がある。</p>
エネルギーと質量には $E=mc^2$ の関係がある。
<span> $variable$ </span>
$variable$
ブロック表示は<div class="math display">～</div>で囲む。
<div class="math display"> $$ x = \frac{-b \pm \sqrt{b^2-4ac}}{2a} $$ </div>
$$
x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}
$$
<div class="math display"> \[ x = \frac{-b \pm \sqrt{b^2-4ac}}{2a} \] </div>
\[
x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}
\]
<div class="math display"> $$ \sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6} \tag{1} $$ </div>
$$
\sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6}
\tag{1}
$$
<div class="math display"> $$ \sum_{n=1}^\infty \frac{1}{n^4} = \frac{\pi^4}{90} \tag{2} $$ </div>
$$
\sum_{n=1}^\infty \frac{1}{n^4} = \frac{\pi^4}{90}
\tag{2}
$$
<div class="math display"> $$ \sum_{n=1}^\infty \frac{1}{n^6} = \frac{\pi^6}{945} \tag{3} $$ </div>
$$
\sum_{n=1}^\infty \frac{1}{n^6} = \frac{\pi^6}{945}
\tag{3}
$$
<div class="math display"> $$ a^3+b^3+c^3-3abc=(a+b+c)(a^2+b^2+c^2-ab-bc-ca) $$ </div>
$$
a^3+b^3+c^3-3abc=(a+b+c)(a^2+b^2+c^2-ab-bc-ca)
$$
<div class="math display"> $$ y = ax^2 + bx + c $$ </div>
$$
y = ax^2 + bx + c
$$
<div class="math display"> $$ f(x) = \int x dx $$ </div>
$$
f(x) = \int x dx
$$
<div class="math display"> $$ e^{j\pi} + 1 = 0 $$ </div>
$$
e^{j\pi} + 1 = 0
$$
<div class="math display"> $$ \begin{eqnarray} \frac{\pi}{2} &=& \left( \int_{0}^{\infty} \frac{\sin x}{\sqrt{x}} dx \right)^2 \\ &=& \sum_{k=0}^{\infty} \frac{(2k)!}{2^{2k}(k!)^2} \frac{1}{2k+1} \\ &=& \prod_{k=1}^{\infty} \frac{4k^2}{4k^2 - 1} \end{eqnarray}) $$ </div>
$$
\begin{eqnarray}
\frac{\pi}{2} &=& \left( \int_{0}^{\infty} \frac{\sin x}{\sqrt{x}} dx \right)^2
\\ &=& \sum_{k=0}^{\infty} \frac{(2k)!}{2^{2k}(k!)^2} \frac{1}{2k+1}
\\ &=& \prod_{k=1}^{\infty} \frac{4k^2}{4k^2 - 1}
\end{eqnarray})
$$
加法定理
$$
\sin(α+β)=\sinα\cosβ+\cosα\sinβ
$$
図の中で数式を使う
GeoGebraという数式ソフトで作った2次関数のグラフをPNG画像で書き出し、大きさ等を若干修正して、画像として貼ってみた。グラフについての数式やキャプションの中でもMathJaxの数式が使えて、表示する位置を工夫すれば、こんな感じになる。
<div class="math-figure"> <figure class="figure-image figure-image-fotolife" title=" $y= \frac{1}{2} x^2 - 2$ ">[f:id:pkdick:20200505200503p:plain]<figcaption> $y= \frac{1}{2} x^2 - 2$ のグラフ</figcaption></figure> </div>
