おはやし日記

テーマ……バイク←プログラミング←旅

はてなブログで綺麗に数式を表示する方法(MathJax覚書き)

こんにちは。

記事の中で数式を書きたい時、ありますよね?

ax2+bx+c=0

って書いてもいいけど

$ ax^{2}+bx+c=0 $

の方がカッコよくないですか?

カッコよく数式を書く方法を紹介します。

MathJaxとは

MathJax とは、

MathJax はMathML、LaTeX、ASCIIMathML(英語版)で記述された数式をウェブブラウザ上で表示するクロスブラウザ(英語版)のJavaScriptライブラリである。MathJaxはApache Licenseのもとでオープンソースソフトウェアとしてリリースされている。
MathJax - Wikipedia

🤔🤔🤔🤔🤔?????

まあ、MathJaxを導入すれば、

$$ 1 + \frac{q^{2}}{(1-q)}+\frac{q^{6}}{(1-q)(1-q^{2})}+\cdots = \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, \quad\quad \text{for $|q| < 1$}. $$

MathJax v3 with TeX input and HTML outputより「A Rogers-Ramanujan Identity」意味は知らない。)のように綺麗な数式が書ける、ということです。

MathJaxの導入

環境

ブログ管理画面→デザイン→カスタマイズ→記事→記事上下のカスタマイズ

f:id:o-treetree:20200616140232p:plainf:id:o-treetree:20200616140235p:plain

f:id:o-treetree:20200616140239p:plain

記事下に次のコードを追加します(ブログのフッタなどに書くとスマホ表示で適用されない)

 <script>
MathJax = {
  tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]}
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

さらに、デザイン→スマートフォン→記事→記事上下のカスタマイズ→PCと同じHTMLを表示するにチェックを入れる

以上です。

使用例

注意

LaTeXの記法(_で下付きとか^で上付きとか)とMarkdownの書式が衝突するので

  • 適宜\エスケープする
  • $の前後や単語の間に空白を取る
  • <p>タグや<span>タグの中に書く

等する必要がある

インライン

  • $で囲む
二次方程式$ax^2+bx+c=0$ →二次方程式$ ax^{2}+bx+c=0$

二次方程式$ax2+bx+c=0$ →二次方程式$ ax^{2}+bx+c=0$

ブロック

  • $$で囲む(前後に空行入れるべし)
$$
x = \frac{-b \pm \sqrt{b^{2}-4ac}}{2a}
$$

$$ x = \frac{-b \pm \sqrt{b^{2}-4ac}}{2a} $$

複数行のブロック

align

\begin{align}\end{align}で囲む。$\rm{MathJax}$的には\\で改行できるのだがMarkdownとの兼ね合いでうまくいかないので\\\とする。あるいは\crとする。&のところで各行が揃う。

\begin{align}
a_1& =b_1+c_1\\\
a_2& =b_2+c_2-d_2+e_2
\end{align}

\begin{align} a_1& =b_1+c_1\\ a_2& =b_2+c_2-d_2+e_2 \end{align}

分岐する

\begin{align}
dp[i][j] = 
\begin{cases}
dp[i-1][j] & (j < c_i) \cr
\min (dp[i-1][j], dp[i][j-c_i]+1) & (otherwise)
\end{cases}
\end{align}

\begin{align} dp[i][j] = \begin{cases} dp[i-1][j] & (j < c_i) \cr \min (dp[i-1][j], dp[i][j-c_i]+1) & (otherwise) \end{cases} \end{align}

split

{split}のbeginとendで囲む。&のところで各行が揃っている

\begin{split} 
a& =b+c-d\cr
& \quad +e-f\cr
& =g+h\cr
& =i 
\end{split} 

\begin{split} a& =b+c-d\cr & \quad +e-f\cr & =g+h\cr & =i \end{split}

記号一覧

LaTeXでの数式の書き方を直接検索した方が早いかも。 これ→(http://www.eng.niigata-u.ac.jp/~nomoto/download/mathjax.pdf (pdf))がわかりやすい markdown記法に対応させた書き方をしています。

空白改行類

記号 入力例 出力例
空白 a \quad b $a \quad b$
小さい空白 ab, a \ b $ab, a \ b$

記号類

記号 入力例 出力例
ドット a \cdots b $a \cdots b$

括弧類

記号 入力例 出力例
中括弧 \\{ a \\} $\{ a \}$

形式に関するもの(?)

記号 入力例 出力例
分数(インライン) a \div b = \frac{a}{b} $a \div b = \frac{a}{b}$
分数(ブロック) a \div b = \frac{a}{b} $$a \div b = \frac{a}{b}$$

参考

プライバシーポリシー ・お問い合わせはこちら