マークアップをエディタで書くのは LaTeX の文化
-
1991年...今から27年前ですね(*1)、その頃文書内で数式を扱う場合は、$\LaTeX$ を使っていました。LaTeXはフリーの組版ソフトで数式の出力に特徴があります。このLaTeXは、テキストファイル内でコマンドを記述...マークアップすることで、文書の整形を行います。
- お気付きの方も多いと思いますが、本HPのHTMLコンテンツはテキストエディタで直接書いています。HTMLの場合
のようにタグを文書内で入れて、それをWebブラウザに解釈させるわけですが、LaTeXでそういった文書編集に慣れすぎていたためか、HTMLタグを直接書くというスタイルに違和感を持つことなく、気付くと今でも直接編集です。
- こういったレポートレベルの文書整形はHTMLで全く問題ありませんが、やはりLaTeXを使っていた者として、数式表現は改善して欲しいなと思っていました(*2)。MathMLの標準化が進み始めたものの、メジャーブラウザの対応が足並み揃わず、これもなかなか使えないと悩んでいたところでMathJaxが登場します。
- MathJaxの良いところは、何と言ってもLaTeXのコマンドをHTML内で直接使えることです。結局数式表現のデファクトスタンダードはLaTeXということなのでしょう。
MathJaxの導入: (2023/02/26更新)
- MathJaxは数式を表示するJavaScriptのライブラリです。よって導入に必要なことは外部にあるMathJaxのJavaScriptをHTMLヘッダ部で呼び出すだけです。
- しかし、このレポート初版を書いた2018/08/26ではMathJax v2.7がメインでしたが、翌年の2019年にはv3がリリースされ、2023/02/26現在はv3.2です。
- v3以降のScript呼び出し記述は各サイトでいろいろとバリエーションがあり、「これでOK」というものを探しにくい状況だったのですが、最近MathJaxのgithubサイトでv2からv3へ変換してくれることに気付きました。
- このサイトを使用して、v2の呼び出し記述をv3に変換しました。v2とv3(自動でlatest)の記述両方を示します。
| v2.7 |
<html lang="ja">
<head>
..(略)..
<!-- (必須)MathJax v2.7呼び出し -->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_CHTML">
</script>
<!-- $〜$でインライン数式,数式左寄せ(デフォルトは中央),左寄せ時インデント(全角2文字),文字大きさ(90%) -->
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ] },
displayAlign: "left",
displayIndent: "2em",
CommonHTML: {scale: 90}
});
</script>
..(略)..
</head>
|
| v3 |
<html lang="ja">
<head>
..(略)..
<!-- $〜$でインライン数式,数式左寄せ(デフォルトは中央),左寄せ時インデント(全角2文字),文字大きさ(90%) -->
<script>
window.MathJax = {
tex: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
autoload: {
color: [],
colorv2: ['color']
},
packages: {'[+]': ['noerrors']}
},
chtml: {
displayAlign: "left",
displayIndent: "2em",
scale: 0.90
},
options: {
ignoreHtmlClass: 'tex2jax_ignore',
processHtmlClass: 'tex2jax_process'
},
loader: {
load: ['[tex]/noerrors']
}
};
</script>
<!-- (必須)MathJax v3呼び出し -->
<script
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script">
</script>
..(略)..
</head>
|
- これでHTML内でMathJaxを使えるようになっています。早速例を見ていきましょう。
LaTeXの記述を思い出す
- インライン数式 と displaystyle
$y = a/b$
|
→ |
$y = a/b$
|
$y = \frac{a}{b}$
|
→ |
$y = \frac{a}{b}$
|
$\displaystyle y = \frac{a}{b}$
|
→ |
$\displaystyle y = \frac{a}{b}$
|
図を隣に置きたい場合は インライン記述 と \diplaystyle の組み合わせが使いやすいです。
- 上付き文字と下付き文字
$x^{2} + Z_{bc}$
|
→ |
$x^{2} + Z_{bc}$
|
- 独立行数式
数式が独立行 \[d = a + b + c\] になる
|
→ |
数式が独立行 \[d = a + b + c\] になる
|
- 分数と括弧
分数を分子/分母で書ける :
\[y = (x+\frac{1-x}{1+x})\]
式に合わせて括弧の高さ変わる :
\[y = \left( x + \frac{1-x}{1+x} \right) \]
他のスタイルの括弧 :
\[y = \left[ x + \frac{1-x}{1+x} \right] \]
\[y = \left\{ x + \frac{1-x}{1+x} \right\} \]
\[y = \left\langle x + \frac{1-x}{1+x} \right\rangle \]
|
→ |
分数を分子/分母で書ける :
\[y = (x+\frac{1-x}{1+x})\]
式に合わせて括弧の高さ変わる :
\[y = \left( x + \frac{1-x}{1+x} \right) \]
他のスタイルの括弧 :
\[y = \left[ x + \frac{1-x}{1+x} \right] \]
\[y = \left\{ x + \frac{1-x}{1+x} \right\} \]
\[y = \left\langle x + \frac{1-x}{1+x} \right\rangle \]
|
- 数学記号(1)
シグマ : $\displaystyle \sum^{N}_{n=0}$
積分記号 : $\displaystyle \int^{a}_{b}$
ルート : $\displaystyle \sqrt{(a+b)^{2}}$
|
→ |
シグマ : $\displaystyle \sum^{N}_{n=0}$
積分記号 : $\displaystyle \int^{a}_{b}$
ルート : $\displaystyle \sqrt{(a+b)^{2}}$
|
- 数学記号(2)
ギリシア文字 :
$\pi, \alpha, \gamma, \lambda, \rho$
$\sigma, \theta, \xi, \omega$
$\varepsilon, \Omega, \varphi, \hbar$
演算子 :
$\pm, \times, \div, \simeq, \equiv$
$\not=, \partial, \infty$
関係演算子 :
$\leq, \geq, \ll, \gg, \in, \ni$
|
→ |
ギリシア文字 :
$\pi, \alpha, \gamma, \lambda, \rho$
$\sigma, \theta, \xi, \omega$
$\varepsilon, \Omega, \varphi, \hbar$
演算子 :
$\pm, \times, \div, \simeq, \equiv$
$\not=, \partial, \infty$
関係演算子 :
$\leq, \geq, \ll, \gg, \in, \ni$
|
- 数学記号(3)
イタリックになって欲しくない関数 :
$\log, \lim, \sin, \exp, \ln$
数式の上下に線を入れる :
$\overline{a+b}, \underline{c+d}$
ベクトル : \boldsymbol は MathJax向け
$\vec{AB}$
$\boldsymbol{B} =
\boldsymbol{\nabla} \times \boldsymbol{A}$
|
→ |
イタリックになって欲しくない関数 :
$\log, \lim, \sin, \exp, \ln$
数式の上下に線を入れる :
$\overline{a+b}, \underline{c+d}$
ベクトル : \boldsymbol は MathJax向け
$\vec{AB}$
$\boldsymbol{B}
= \boldsymbol{\nabla} \times \boldsymbol{A}$
|
- 便利な記号
ギリシア文字斜体 :
$\varDelta, \varPsi$ ・・・
多重積分記号(細工無し) :
$\iint, \iiint, \idotsint$
ドットが簡単(自動判別!!)
$a, b, \dots, c$
$a + b + \dots + c$
$abc \dots z$
|
→ |
ギリシア文字斜体 :
$\varDelta, \varPsi$ ・・・
多重積分記号(細工無し) :
$\iint, \iiint, \idotsint$
ドットが簡単(自動判別!!)
$a, b, \dots, c$
$a + b + \dots + c$
$abc \dots z$
|
- 行列(マトリックス): 括弧の種類に注意
\[
A = \begin{matrix}
a_{11} & a_{12} \\
a_{21} & a_{22}
\end{matrix}
\]
\[
A = \begin{pmatrix}
a_{11} & a_{12} \\
a_{21} & a_{22}
\end{pmatrix}
\]
\[
A = \begin{bmatrix}
a_{11} & a_{12} \\
a_{21} & a_{22}
\end{bmatrix}
\]
\[
A = \begin{vmatrix}
a_{11} & a_{12} \\
a_{21} & a_{22}
\end{vmatrix}
\]
|
→ |
\[
A = \begin{matrix}
a_{11} & a_{12} \\
a_{21} & a_{22}
\end{matrix}
\]
\[
A = \begin{pmatrix}
a_{11} & a_{12} \\
a_{21} & a_{22}
\end{pmatrix}
\]
\[
A = \begin{bmatrix}
a_{11} & a_{12} \\
a_{21} & a_{22}
\end{bmatrix}
\]
\[
A = \begin{vmatrix}
a_{11} & a_{12} \\
a_{21} & a_{22}
\end{vmatrix}
\]
|
- 複数行の式
連分数式
\[ y = 1 + \cfrac{1+\cfrac{1}{1+x}}{3+x} \]
場合分け
\[ x = \begin{cases}
10 & a\leq10 \\
0 & a<10
\end{cases}
\]
計算過程
\[ \begin{split}
x &= 3 + 5 + x + 10 + 3 + y \\
&= 8 + x + 13 + y
\end{split}
\]
複数式の集合 : 2番目は式番スキップ
\begin{gather}
a = b + c \\
b = e + f \notag \\
c = g + h
\end{gather}
|
→ |
連分数式
\[ y = 1 + \cfrac{1+\cfrac{1}{1+x}}{3+x} \]
場合分け
\[ x = \begin{cases}
10 & a\leq10 \\
0 & a<10
\end{cases}
\]
計算過程
\[ \begin{split}
x &= 3 + 5 + x + 10 + 3 + y \\
&= 8 + x + 13 + y
\end{split}
\]
複数式の集合
\begin{gather}
a = b + c \\
b = e + f \\
c = g + h
\end{gather}
|
思い出すのは数式関係だけでOK
- LaTeXには表作成といったドキュメント整形のコマンドも多くありますが、HTML自身がドキュメントの整形機能を持っているので、MathJaxで扱うのは数式表現だけです。
- なので大体の数式表現は、この前のSectionに書かれた内容で足りるだろうと思っています。
|