cBlog

Tips for you.

はてなブログで数式が綺麗に書けるTeXの便利ワザ for 見たままモード

前回の記事で久しぶりに数式を使いました。いろいろと新たな発見があったので記事中に数式を入れる方法を書き残しておきます。

 

TeXとは

TeXとはざっくり言うと数式を記述するための言語です。ウソです。本当は組版システムです。いきなり何をと思われたかもしれませんが私もよくわかりません。今はもっぱら、TeXをもっと使いやすくしたLaTeXが使われています。詳しくは参考リンクを参照してください。はてなブログでは、(はてなダイアリーと異なり)数式の表示にMathJaxというライブラリを利用しています。

参考:TeX - Wikipedia

参考:TeX と LaTeX の違い | ラング・ラグー

 

MathJaxとは

MathJaxとはLaTeXで書かれた数式をWebブラウザ上で表示させるためのJavaScriptライブラリです。

www.mathjax.org

ちょっと読み込みが重くなります。

 

tex記法

はてなブログでTeXを書いてもそのまま表示されてしまいます。ここからここまでがTeX言語だよと教えてあげなければなりません。それがはてなのtex記法で、

[tex:e^{i\pi} + 1 = 0]

のように書くと

e^{i\pi} + 1 = 0

と表示されます。

参考:数式を表示する(tex記法) - はてなダイアリーのヘルプ

はてな記法だけでなく見たままモードでも使うことができます。様々な表記や記号の出し方は検索してみてください。

 

もっと便利な書き方

ここからはこの記事を書いたときには知らなかったTipsです。

[tex:\zeta(s) = \sum_{n=1}^{\infty} \frac{1}{n^s}]

のようにsummationを書いても以下のように省スペースで表示されてしまいます。

\zeta(s) = \sum_{n=1}^{\infty} \frac{1}{n^s}

これは数式が文中形式になっているからで\displaystyleを加えると独立行で表示されます。

[tex:\displaystyle \zeta(s) = \sum_{n=1}^{\infty} \frac{1}{n^s}]

\displaystyle \zeta(s) = \sum_{n=1}^{\infty} \frac{1}{n^s}

しかし、いちいち書くのにめんどくささを感じていました。

実は一度tex記法を使うと、以降素で書いてもTeX形式が有効になるようです。(ただし、改行はshift + enter (<br />)で。)

\begin{align}
\zeta(s) = \sum_{n=1}^{\infty} \frac{1}{n^s}
\end{align}

\begin{align}
\zeta(s) = \sum_{n=1}^{\infty} \frac{1}{n^s}
\end{align}

便利ですね。

参考:

abrahamcow.hatenablog.com

 

[tex: ]と先に書いておこう

最初の数式はtex記法で書かなければいけないのでしょうか。いいえ、[tex: ]と書いておけばいいのです。空行ができるので、加えてスタイルで非表示にします。HTML編集で最初の数式より上に以下の記述を追加しておきましょう。

<p style="display: none;">[tex: ]</p>

 

“&”も使える

align環境では“&”の位置で数式が縦に揃うのですが、[tex: ]内に書いても&amp;とエスケープされるためか機能しませんでした。ところが、[tex: ]で有効にしておいて平文で書けば機能します。

\begin{align}
\zeta(s) &= \sum_{n=1}^{\infty} \frac{1}{n^s} \\
&= \prod_p \frac{1}{1-p^{-s}}
\end{align}

\begin{align}
\zeta(s) &= \sum_{n=1}^{\infty} \frac{1}{n^s} \\
&= \prod_p \frac{1}{1-p^{-s}}
\end{align}

 

横スクロールできるようにする

スマホで見ると、横に長い数式がはみ出て見えないことがあります。以下のCSSを管理画面のデザイン > カスタマイズにある「デザインCSS」欄に追加しておくとスクロールできるようになります。

/* MathJax */
.MathJax_Display {
    overflow-x: scroll;
    overflow-y: hidden;
}

4行目は、Safariだとなぜか縦スクロールしてしまうので入れてあります。

 

数式番号を付ける

自動で付けるにはHTML編集で1行目に以下のコードを追加します。

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  TeX: { equationNumbers: { autoNumber: "AMS" } }
});
</script>

参考:MathJax TeX and LaTeX Support — MathJax 2.7 documentation

一部の数式に手動で付けるには\tag{}を利用します。

\begin{align}
f(a) = \frac{1}{2\pi i} \oint_\gamma \frac{f(z)}{z - a}\,dz \tag{1}
\end{align}

\begin{align}
f(a) = \frac{1}{2\pi i} \oint_\gamma \frac{f(z)}{z - a}\,dz \tag{1}
\end{align}

 

[改訂第7版]LaTeX2ε美文書作成入門

[改訂第7版]LaTeX2ε美文書作成入門