List of Mathjax - text.Baldanders.info
tag:text.Baldanders.info,2024-01-27:/tags
2024-01-27T08:52:26+09:00
帰ってきた「しっぽのさきっちょ」
https://text.baldanders.info/images/avatar.jpg
https://text.baldanders.info/images/avatar.jpg
Hugo 0.122 で TeX/LaTeX 数式表現ができるようになった(いまさら?)
tag:text.Baldanders.info,2024-01-27:/remark/2024/01/tex-math-expression-in-hugo-0_122/
2024-01-26T23:52:26+00:00
2024-01-27T06:21:22+00:00
そういえば別行立ての数式は shortcode とか使って細工する必要があったな
Spiegel
https://baldanders.info/profile/
<p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> 0.122.0 がリリースされた。</p>
<ul>
<li><a href="https://github.com/gohugoio/hugo/releases/tag/v0.122.0">Release v0.122.0 · gohugoio/hugo · GitHub</a></li>
</ul>
<figure style='margin:0 auto;text-align:center;'>
<iframe src="https://fosstodon.org/@gohugoio/111823216188959656/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe><script src="https://fosstodon.org/embed.js" async="async"></script>
</figure>
<p>今回の目玉機能は $\mathrm{\TeX}$/$\mathrm{\LaTeX}$ 記法による数式表現に対応したことらしい。
えっ,いまさら? あー,いや,そういえば別行立ての数式は shortcode とか使って細工する必要があったな,そういえば。</p>
<p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> で $\mathrm{\TeX}$/$\mathrm{\LaTeX}$ 記法による数式表現に対応するには</p>
<ol>
<li>サイト設定ファイル <code>hugo.toml</code> (または <code>config.toml</code>) で数式表現用のデリミタ文字列を指定する</li>
<li>数式変換用のパッケージ(<a href="https://www.mathjax.org/" title="MathJax | Beautiful math in all browsers.">MathJax</a> または <a href="https://katex.org/" title="KaTeX – The fastest math typesetting library for the web">KaTeX</a>)を導入する</li>
</ol>
<p>といった手順が必要。</p>
<p>サイト設定ファイルの内容はこんな感じ。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">markup</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">defaultMarkdownHandler</span> <span class="p">=</span> <span class="s2">"goldmark"</span>
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">markup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">markup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">extensions</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">markup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">extensions</span><span class="p">.</span><span class="nx">passthrough</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">enable</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">markup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">extensions</span><span class="p">.</span><span class="nx">passthrough</span><span class="p">.</span><span class="nx">delimiters</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">block</span> <span class="p">=</span> <span class="p">[[</span><span class="s1">'\['</span><span class="p">,</span> <span class="s1">'\]'</span><span class="p">],</span> <span class="p">[</span><span class="s1">'$$'</span><span class="p">,</span> <span class="s1">'$$'</span><span class="p">]]</span>
</span></span></code></pre></div><p>YAML や JSON で書く場合は <a href="https://gohugo.io/content-management/mathematics/" title="Mathematics in markdown | Hugo">Hugo のドキュメント</a>を参照のこと。</p>
<p><a href="https://katex.org/" title="KaTeX – The fastest math typesetting library for the web">KaTeX</a> は使ったことがないが <a href="https://www.mathjax.org/" title="MathJax | Beautiful math in all browsers.">MathJax</a> については以前に記事にしたことがあるので参考にどうぞ。</p>
<ol>
<li><a href="https://text.baldanders.info/remark/2017/09/getting-started-mathjax-1/">ちょこっと MathJax: 初期設定</a></li>
<li><a href="https://text.baldanders.info/remark/2017/09/getting-started-mathjax-2/">ちょこっと MathJax: 基本的な数式表現</a></li>
<li><a href="https://text.baldanders.info/remark/2017/10/getting-started-mathjax-3/">ちょこっと MathJax: インライン数式と別行立て数式</a></li>
<li><a href="https://text.baldanders.info/remark/2017/12/mathcomp-in-mathjax/">ちょこっと MathJax 番外編: mathcomp パッケージの代替え</a></li>
</ol>
<p>これでたとえば</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-tex" data-lang="tex"><span class="line"><span class="cl"><span class="sb">\[</span><span class="nb">
</span></span></span><span class="line"><span class="cl"><span class="nb"></span><span class="nv">\begin</span><span class="nb">{aligned}
</span></span></span><span class="line"><span class="cl"><span class="nb">KL</span><span class="o">(</span><span class="nv">\hat</span><span class="nb">{y} || y</span><span class="o">)</span><span class="nb"> &</span><span class="o">=</span><span class="nb"> </span><span class="nv">\sum</span><span class="nb">_{c</span><span class="o">=</span><span class="m">1</span><span class="nb">}^{M}</span><span class="nv">\hat</span><span class="nb">{y}_c </span><span class="nv">\log</span><span class="nb">{</span><span class="nv">\frac</span><span class="nb">{</span><span class="nv">\hat</span><span class="nb">{y}_c}{y_c}} </span><span class="nv">\\</span><span class="nb">
</span></span></span><span class="line"><span class="cl"><span class="nb">JS</span><span class="o">(</span><span class="nv">\hat</span><span class="nb">{y} || y</span><span class="o">)</span><span class="nb"> &</span><span class="o">=</span><span class="nb"> </span><span class="nv">\frac</span><span class="nb">{</span><span class="m">1</span><span class="nb">}{</span><span class="m">2</span><span class="nb">}</span><span class="o">(</span><span class="nb">KL</span><span class="o">(</span><span class="nb">y||</span><span class="nv">\frac</span><span class="nb">{y</span><span class="o">+</span><span class="nv">\hat</span><span class="nb">{y}}{</span><span class="m">2</span><span class="nb">}</span><span class="o">)</span><span class="nb"> </span><span class="o">+</span><span class="nb"> KL</span><span class="o">(</span><span class="nv">\hat</span><span class="nb">{y}||</span><span class="nv">\frac</span><span class="nb">{y</span><span class="o">+</span><span class="nv">\hat</span><span class="nb">{y}}{</span><span class="m">2</span><span class="nb">}</span><span class="o">))</span><span class="nb">
</span></span></span><span class="line"><span class="cl"><span class="nb"></span><span class="nv">\end</span><span class="nb">{aligned}
</span></span></span><span class="line"><span class="cl"><span class="nb"></span><span class="s">\]</span>
</span></span></code></pre></div><p>と書けば</p>
\[
\begin{aligned}
KL(\hat{y} || y) &= \sum_{c=1}^{M}\hat{y}_c \log{\frac{\hat{y}_c}{y_c}} \\
JS(\hat{y} || y) &= \frac{1}{2}(KL(y||\frac{y+\hat{y}}{2}) + KL(\hat{y}||\frac{y+\hat{y}}{2}))
\end{aligned}
\]
<p>と展開される(筈)</p>
<p>いや,待て。
<code>\[ ... \]</code> って <code>\begin{equation*} ... \end{equation*}</code> と等価だろ。
問題なく処理はされるだろうけど,意味としておかしくないか。</p>
<p>試しに <code>\[ ... \]</code> を外して</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-tex" data-lang="tex"><span class="line"><span class="cl"><span class="k">\begin</span><span class="nb">{</span>aligned<span class="nb">}</span>
</span></span><span class="line"><span class="cl">KL(<span class="k">\hat</span><span class="nb">{</span>y<span class="nb">}</span> || y) <span class="nb">&</span>= <span class="k">\sum</span><span class="nb">_{</span>c=1<span class="nb">}^{</span>M<span class="nb">}</span><span class="k">\hat</span><span class="nb">{</span>y<span class="nb">}_</span>c <span class="k">\log</span><span class="nb">{</span><span class="k">\frac</span><span class="nb">{</span><span class="k">\hat</span><span class="nb">{</span>y<span class="nb">}_</span>c<span class="nb">}{</span>y<span class="nb">_</span>c<span class="nb">}}</span> <span class="k">\\</span>
</span></span><span class="line"><span class="cl">JS(<span class="k">\hat</span><span class="nb">{</span>y<span class="nb">}</span> || y) <span class="nb">&</span>= <span class="k">\frac</span><span class="nb">{</span>1<span class="nb">}{</span>2<span class="nb">}</span>(KL(y||<span class="k">\frac</span><span class="nb">{</span>y+<span class="k">\hat</span><span class="nb">{</span>y<span class="nb">}}{</span>2<span class="nb">}</span>) + KL(<span class="k">\hat</span><span class="nb">{</span>y<span class="nb">}</span>||<span class="k">\frac</span><span class="nb">{</span>y+<span class="k">\hat</span><span class="nb">{</span>y<span class="nb">}}{</span>2<span class="nb">}</span>))
</span></span><span class="line"><span class="cl"><span class="k">\end</span><span class="nb">{</span>aligned<span class="nb">}</span>
</span></span></code></pre></div><p>とすると期待通りには変換しない。
Markdown のパーサが上の記述を丸ごと <code><p></code> 要素で囲ってしまうからのようだ。
サイト設定で指定したデリミタ文字列を使った</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">エネルギーと質量には $$E=mc^2$$ の関係がある。
</span></span></code></pre></div><p>みたいな記述なら</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span><span class="p">></span>エネルギーと質量には <span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></span><span class="line"><span class="cl">$$E=mc^2$$
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span><span class="p">></span> の関係がある。<span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></span></code></pre></div><p>などとパーサ側でうまく分離してくれるのだが。</p>
<p><code>\begin{aligned} ... \end{aligned}</code> のような $\mathrm{\LaTeX}$ 環境を無駄に <code>\[ ... \]</code> で囲むのがどうしても嫌な方は,強制的に <code><div></code> 要素で囲って</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-tex" data-lang="tex"><span class="line"><span class="cl"><div>
</span></span><span class="line"><span class="cl"><span class="k">\begin</span><span class="nb">{</span>aligned<span class="nb">}</span>
</span></span><span class="line"><span class="cl">KL(<span class="k">\hat</span><span class="nb">{</span>y<span class="nb">}</span> || y) <span class="nb">&</span>= <span class="k">\sum</span><span class="nb">_{</span>c=1<span class="nb">}^{</span>M<span class="nb">}</span><span class="k">\hat</span><span class="nb">{</span>y<span class="nb">}_</span>c <span class="k">\log</span><span class="nb">{</span><span class="k">\frac</span><span class="nb">{</span><span class="k">\hat</span><span class="nb">{</span>y<span class="nb">}_</span>c<span class="nb">}{</span>y<span class="nb">_</span>c<span class="nb">}}</span> <span class="k">\\</span>
</span></span><span class="line"><span class="cl">JS(<span class="k">\hat</span><span class="nb">{</span>y<span class="nb">}</span> || y) <span class="nb">&</span>= <span class="k">\frac</span><span class="nb">{</span>1<span class="nb">}{</span>2<span class="nb">}</span>(KL(y||<span class="k">\frac</span><span class="nb">{</span>y+<span class="k">\hat</span><span class="nb">{</span>y<span class="nb">}}{</span>2<span class="nb">}</span>) + KL(<span class="k">\hat</span><span class="nb">{</span>y<span class="nb">}</span>||<span class="k">\frac</span><span class="nb">{</span>y+<span class="k">\hat</span><span class="nb">{</span>y<span class="nb">}}{</span>2<span class="nb">}</span>))
</span></span><span class="line"><span class="cl"><span class="k">\end</span><span class="nb">{</span>aligned<span class="nb">}</span>
</span></span><span class="line"><span class="cl"></div>
</span></span></code></pre></div><p>とすれば markdown のパーサが生の HTML 記述と解釈しスルーしてくれる<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>。
私は数式専用の shortcode を作って利用している。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-tex" data-lang="tex"><span class="line"><span class="cl"><span class="nb">{{</span>< fig-math ><span class="nb">}}</span>
</span></span><span class="line"><span class="cl"><span class="k">\begin</span><span class="nb">{</span>aligned<span class="nb">}</span>
</span></span><span class="line"><span class="cl">KL(<span class="k">\hat</span><span class="nb">{</span>y<span class="nb">}</span> || y) <span class="nb">&</span>= <span class="k">\sum</span><span class="nb">_{</span>c=1<span class="nb">}^{</span>M<span class="nb">}</span><span class="k">\hat</span><span class="nb">{</span>y<span class="nb">}_</span>c <span class="k">\log</span><span class="nb">{</span><span class="k">\frac</span><span class="nb">{</span><span class="k">\hat</span><span class="nb">{</span>y<span class="nb">}_</span>c<span class="nb">}{</span>y<span class="nb">_</span>c<span class="nb">}}</span> <span class="k">\\</span>
</span></span><span class="line"><span class="cl">JS(<span class="k">\hat</span><span class="nb">{</span>y<span class="nb">}</span> || y) <span class="nb">&</span>= <span class="k">\frac</span><span class="nb">{</span>1<span class="nb">}{</span>2<span class="nb">}</span>(KL(y||<span class="k">\frac</span><span class="nb">{</span>y+<span class="k">\hat</span><span class="nb">{</span>y<span class="nb">}}{</span>2<span class="nb">}</span>) + KL(<span class="k">\hat</span><span class="nb">{</span>y<span class="nb">}</span>||<span class="k">\frac</span><span class="nb">{</span>y+<span class="k">\hat</span><span class="nb">{</span>y<span class="nb">}}{</span>2<span class="nb">}</span>))
</span></span><span class="line"><span class="cl"><span class="k">\end</span><span class="nb">{</span>aligned<span class="nb">}</span>
</span></span><span class="line"><span class="cl"><span class="nb">{{</span>< /fig-math ><span class="nb">}}</span>
</span></span></code></pre></div><h2>ブックマーク</h2>
<ul>
<li><a href="https://gohugo.io/content-management/mathematics/">Mathematics in markdown | Hugo</a></li>
</ul>
<h2 id="books">参考図書</h2>
<div class="hreview">
<div class="photo"><a href="https://www.amazon.co.jp/dp/4297117126?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1"><img src="https://m.media-amazon.com/images/I/41xmBlTiwlL._SL160_.jpg" width="126" alt="photo"></a></div>
<dl>
<dt class="item"><a class="fn url" href="https://www.amazon.co.jp/dp/4297117126?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1">[改訂第8版]LaTeX2ε美文書作成入門</a></dt>
<dd>奥村晴彦 (著), 黒木裕介 (著)</dd>
<dd>技術評論社 2020-11-14</dd>
<dd>大型本</dd>
<dd>4297117126 (ASIN), 9784297117122 (EAN), 4297117126 (ISBN)</dd>
<dd>評価<abbr class="rating fa-sm" title="5"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i></abbr></dd>
</dl>
<p class="description">2020年末に第8版が出てたのに気付かなかったよ。可能なら紙の本も買って常に側に置いておくのが吉。<a href="https://gihyo.jp/book/2020/978-4-297-11712-2">版元</a>には PDF 版もある。</p>
<p class="powered-by">reviewed by <a href='#maker' class='reviewer'>Spiegel</a> on <abbr class="dtreviewed" title="2021-09-05">2021-09-05</abbr> (powered by <a href="https://affiliate.amazon.co.jp/assoc_credentials/home">PA-APIv5</a>)</p>
</div> <!-- LaTeX2ε美文書作成入門 -->
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>たとえば <code>\begin{aligned} ... \end{aligned}</code> のような環境をよく使うというのであれば,デリミタとしてサイト設定ファイル(<code>hugo.toml</code>)に指定するのも手である。 <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</div>
MathJax v3 がリリースされていた
tag:text.Baldanders.info,2019-09-28:/release/2019/09/mathjax-v3-is-released/
2019-09-28T09:29:26+00:00
2021-09-05T08:45:39+00:00
v2.7.x までとはだいぶ変わったので注意。
Spiegel
https://baldanders.info/profile/
<p>いや,確かに8月末にはリリースするって予告されてたけどさ。
その後のアナウンスがないから気づかなかったよ。</p>
<p>ちうわけで <a href="https://www.mathjax.org/" title="MathJax | Beautiful math in all browsers.">MathJax</a> v3.0.0 がリリースされていた。
よーやくベータが取れたよ(笑)</p>
<p>ドキュメントも v3 に対応しているようだ。</p>
<ul>
<li><a href="https://docs.mathjax.org/en/latest/">MathJax Documentation — MathJax 3.0 documentation</a></li>
</ul>
<p>Web ページで <a href="https://www.mathjax.org/" title="MathJax | Beautiful math in all browsers.">MathJax</a> を使えるようにするには以下のコードを記述する。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="nx">MathJax</span> <span class="o">=</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="p">...</span>
</span></span><span class="line"><span class="cl"><span class="p">};</span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">script</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">id</span><span class="o">=</span><span class="s">"MathJax-script"</span> <span class="na">async</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
</span></span></code></pre></div><p><a href="https://www.mathjax.org/" title="MathJax | Beautiful math in all browsers.">MathJax</a> v3 の特定のバージョンを指定するには最後の行を</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">id</span><span class="o">=</span><span class="s">"MathJax-script"</span> <span class="na">async</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/mathjax@3.0.0/es5/tex-mml-chtml.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
</span></span></code></pre></div><p>などとする。</p>
<p>IE (Internet Explorer) に対応するには以下のように1行足せばいいようだ。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line hl"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://polyfill.io/v3/polyfill.min.js?features=es6"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">id</span><span class="o">=</span><span class="s">"MathJax-script"</span> <span class="na">async</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
</span></span></code></pre></div><p>なお,このブログでは IE はサポート外なのであしからず(笑)</p>
<h2><a href="https://www.mathjax.org/" title="MathJax | Beautiful math in all browsers.">MathJax</a> v3 の設定</h2>
<p><code>MathJax = { ... };</code> の部分には <a href="https://www.mathjax.org/" title="MathJax | Beautiful math in all browsers.">MathJax</a> の設定を記述する。
v2.7.x までとはフォーマットが異なるので注意。</p>
<p>主な設定項目は以下の通り。</p>
<h3><a href="https://docs.mathjax.org/en/latest/options/input/tex.html" title="TeX Input Processor Options — MathJax 3.0 documentation">TeX Input Processor Options</a></h3>
<p>設定項目と既定値は以下の通り。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">MathJax</span> <span class="o">=</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">tex</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">packages</span><span class="o">:</span> <span class="p">[</span><span class="s1">'base'</span><span class="p">],</span> <span class="c1">// extensions to use
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">inlineMath</span><span class="o">:</span> <span class="p">[</span> <span class="c1">// start/end delimiter pairs for in-line math
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">[</span><span class="s1">'\\('</span><span class="p">,</span> <span class="s1">'\\)'</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="p">],</span>
</span></span><span class="line"><span class="cl"> <span class="nx">displayMath</span><span class="o">:</span> <span class="p">[</span> <span class="c1">// start/end delimiter pairs for display math
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">[</span><span class="s1">'$$'</span><span class="p">,</span> <span class="s1">'$$'</span><span class="p">],</span>
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="s1">'\\['</span><span class="p">,</span> <span class="s1">'\\]'</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="p">],</span>
</span></span><span class="line"><span class="cl"> <span class="nx">processEscapes</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// use \$ to produce a literal dollar sign
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">processEnvironments</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// process \begin{xxx}...\end{xxx} outside math mode
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">processRefs</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// process \ref{...} outside of math mode
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">digits</span><span class="o">:</span> <span class="sr">/^(?:[0-9]+(?:\{,\}[0-9]{3})*(?:\.[0-9]*)?|\.[0-9]+)/</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="c1">// pattern for recognizing numbers
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">tags</span><span class="o">:</span> <span class="s1">'none'</span><span class="p">,</span> <span class="c1">// or 'ams' or 'all'
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">tagSide</span><span class="o">:</span> <span class="s1">'right'</span><span class="p">,</span> <span class="c1">// side for \tag macros
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">tagIndent</span><span class="o">:</span> <span class="s1">'0.8em'</span><span class="p">,</span> <span class="c1">// amount to indent tags
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">useLabelIds</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// use label name rather than tag for ids
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">multlineWidth</span><span class="o">:</span> <span class="s1">'85%'</span><span class="p">,</span> <span class="c1">// width of multline environment
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">maxMacros</span><span class="o">:</span> <span class="mi">1000</span><span class="p">,</span> <span class="c1">// maximum number of macro substitutions per expression
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">maxBuffer</span><span class="o">:</span> <span class="mi">5</span> <span class="o">*</span> <span class="mi">1024</span><span class="p">,</span> <span class="c1">// maximum size for the internal TeX string (5K)
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">baseURL</span><span class="o">:</span> <span class="c1">// URL for use with links to tags (when there is a <base> tag in effect)
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'base'</span><span class="p">).</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="o">?</span>
</span></span><span class="line"><span class="cl"> <span class="s1">''</span> <span class="o">:</span> <span class="nb">String</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">location</span><span class="p">).</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/#.*$/</span><span class="p">,</span> <span class="s1">''</span><span class="p">))</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">};</span>
</span></span></code></pre></div><p>インライン数式を囲む記号として <code>$ .. $</code> を有効にするには <code>inlineMath</code> 項目を以下のように変更する。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">inlineMath</span><span class="o">:</span> <span class="p">[[</span><span class="s1">'$'</span><span class="p">,</span> <span class="s1">'$'</span><span class="p">],</span> <span class="p">[</span><span class="s1">'\\('</span><span class="p">,</span> <span class="s1">'\\)'</span><span class="p">]]</span>
</span></span></code></pre></div><p>別行立て数式に対して自動採番を行うには <code>tags</code> 項目に <code>ams</code> または <code>all</code> をセットする。</p>
<p>自作のマクロを組み込む際には <code>macro</code> 項目をセットする。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">macros</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">ssqrt</span><span class="o">:</span> <span class="p">[</span><span class="s1">'\\sqrt{\\smash[b]{\\mathstrut #1}}'</span><span class="p">,</span> <span class="mi">1</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><h3><a href="https://docs.mathjax.org/en/latest/options/output/chtml.html" title="CommonHTML Output Processor Options — MathJax 3.0 documentation">CommonHTML Output Processor Options</a></h3>
<p>設定項目と既定値は以下の通り。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">MathJax</span> <span class="o">=</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">chtml</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">scale</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> <span class="c1">// global scaling factor for all expressions
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">minScale</span><span class="o">:</span> <span class="p">.</span><span class="mi">5</span><span class="p">,</span> <span class="c1">// smallest scaling factor to use
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">matchFontHeight</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// true to match ex-height of surrounding font
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">mtextInheritFont</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// true to make mtext elements use surrounding font
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">merrorInheritFont</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// true to make merror text use surrounding font
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">mathmlSpacing</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// true for MathML spacing rules, false for TeX rules
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">skipAttributes</span><span class="o">:</span> <span class="p">{},</span> <span class="c1">// RFDa and other attributes NOT to copy to the output
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">exFactor</span><span class="o">:</span> <span class="p">.</span><span class="mi">5</span><span class="p">,</span> <span class="c1">// default size of ex in em units
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">displayAlign</span><span class="o">:</span> <span class="s1">'center'</span><span class="p">,</span> <span class="c1">// default for indentalign when set to 'auto'
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">displayIndent</span><span class="o">:</span> <span class="s1">'0'</span><span class="p">,</span> <span class="c1">// default for indentshift when set to 'auto'
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">fontURL</span><span class="o">:</span> <span class="s1">'[mathjax]/components/output/chtml/fonts/woff-v2'</span><span class="p">,</span> <span class="c1">// The URL where the fonts are found
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">adaptiveCSS</span><span class="o">:</span> <span class="kc">true</span> <span class="c1">// true means only produce CSS that is used in the processed equations
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">};</span>
</span></span></code></pre></div><p>日本語の文章に数式を埋め込む場合,文字サイズのバランスがよくないので <code>matchFontHeight</code> 項目を <code>false</code> にする。</p>
<p>別行立て数式を左寄せで表示するには <code>displayAlign</code> 項目を <code>left</code> にする。
併せて <code>displayIndent</code> 項目でインデント幅もセットするとよい。</p>
<h3>拡張パッケージを組み込む</h3>
<p>たとえば <code>color</code> という拡張パッケージを組み込むには以下のように記述する。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">MathJax</span> <span class="o">=</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">loader</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">load</span><span class="o">:</span> <span class="p">[</span><span class="s1">'[tex]/color'</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="nx">tex</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">packages</span><span class="o">:</span> <span class="p">{</span><span class="s1">'[+]'</span><span class="o">:</span> <span class="p">[</span><span class="s1">'color'</span><span class="p">]}</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">};</span>
</span></span></code></pre></div><p>ただし現時点で使えそうなパッケージはなさそう。
<a href="https://ctan.org/pkg/mathcomp" title="CTAN: Package mathcomp">mathcomp</a> があるといいのに。</p>
<p>v2.7.x で外部パッケージだったものの一部は標準で組み込まれているようだ。
たとえば <code>mhchem.js</code> は明示的に組み込まなくても</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">経済成長と $\ce{CO2}$ 排出量は比例しなくなっている。
</span></span></code></pre></div><blockquote>
<p>経済成長と $\ce{CO2}$ 排出量は比例しなくなっている<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>。</p>
</blockquote>
<p>てな感じに書くことができる。</p>
<h3>このサイトの設定内容</h3>
<p>このサイトの設定内容は今のところ以下の通り。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">MathJax</span> <span class="o">=</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">tex</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">inlineMath</span><span class="o">:</span> <span class="p">[[</span><span class="s1">'$'</span><span class="p">,</span> <span class="s1">'$'</span><span class="p">],</span> <span class="p">[</span><span class="s1">'\\('</span><span class="p">,</span> <span class="s1">'\\)'</span><span class="p">]],</span>
</span></span><span class="line"><span class="cl"> <span class="nx">processEscapes</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nx">tags</span><span class="o">:</span> <span class="s1">'ams'</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nx">macros</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">ssqrt</span><span class="o">:</span> <span class="p">[</span><span class="s1">'\\sqrt{\\smash[b]{\\mathstrut #1}}'</span><span class="p">,</span> <span class="mi">1</span><span class="p">],</span>
</span></span><span class="line"><span class="cl"> <span class="nx">tcdegree</span><span class="o">:</span> <span class="p">[</span><span class="s1">'\\unicode{xb0}'</span><span class="p">],</span>
</span></span><span class="line"><span class="cl"> <span class="nx">tccelsius</span><span class="o">:</span> <span class="p">[</span><span class="s1">'\\unicode{x2103}'</span><span class="p">],</span>
</span></span><span class="line"><span class="cl"> <span class="nx">tcperthousand</span><span class="o">:</span> <span class="p">[</span><span class="s1">'\\unicode{x2030}'</span><span class="p">],</span>
</span></span><span class="line"><span class="cl"> <span class="nx">tcmu</span><span class="o">:</span> <span class="p">[</span><span class="s1">'\\unicode{x3bc}'</span><span class="p">],</span>
</span></span><span class="line"><span class="cl"> <span class="nx">tcohm</span><span class="o">:</span> <span class="p">[</span><span class="s1">'\\unicode{x3a9}'</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="nx">chtml</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">matchFontHeight</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nx">displayAlign</span><span class="o">:</span> <span class="s2">"left"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nx">displayIndent</span><span class="o">:</span> <span class="s2">"2em"</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">};</span>
</span></span></code></pre></div><p>CDN で提供される Web フォントは1種類のみで他のフォントを選択することができない。
これは将来バージョンで改善するらしい。
Web フォントのサポートが組み込まればまた紹介することもあるだろう。</p>
<h2>ブックマーク</h2>
<ul>
<li><a href="https://text.baldanders.info/remark/2017/09/getting-started-mathjax-1/">ちょこっと MathJax</a></li>
</ul>
<h2>参考図書</h2>
<div class="hreview">
<div class="photo"><a href="https://www.amazon.co.jp/dp/4297117126?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1"><img src="https://m.media-amazon.com/images/I/41xmBlTiwlL._SL160_.jpg" width="126" alt="photo"></a></div>
<dl>
<dt class="item"><a class="fn url" href="https://www.amazon.co.jp/dp/4297117126?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1">[改訂第8版]LaTeX2ε美文書作成入門</a></dt>
<dd>奥村晴彦 (著), 黒木裕介 (著)</dd>
<dd>技術評論社 2020-11-14</dd>
<dd>大型本</dd>
<dd>4297117126 (ASIN), 9784297117122 (EAN), 4297117126 (ISBN)</dd>
<dd>評価<abbr class="rating fa-sm" title="5"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i></abbr></dd>
</dl>
<p class="description">2020年末に第8版が出てたのに気付かなかったよ。可能なら紙の本も買って常に側に置いておくのが吉。<a href="https://gihyo.jp/book/2020/978-4-297-11712-2">版元</a>には PDF 版もある。</p>
<p class="powered-by">reviewed by <a href='#maker' class='reviewer'>Spiegel</a> on <abbr class="dtreviewed" title="2021-09-05">2021-09-05</abbr> (powered by <a href="https://affiliate.amazon.co.jp/assoc_credentials/home">PA-APIv5</a>)</p>
</div> <!-- LaTeX2ε美文書作成入門 -->
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>「<a href="http://wired.jp/2017/03/29/global-carbon-emissions/" title="経済成長とCO2排出量は「比例しなくなっている」:IEA報告書|WIRED.jp">経済成長とCO2排出量は「比例しなくなっている」:IEA報告書</a>」より。 <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</div>
MathJax v2.7.6 がリリースされた
tag:text.Baldanders.info,2019-08-25:/release/2019/08/mathjax-v2_7_6-is-released/
2019-08-25T01:25:16+00:00
2021-09-05T08:45:39+00:00
つか v3 の(βが取れた)正式版が8月末(日本では9月初?)にようやく出るのか。
Spiegel
https://baldanders.info/profile/
<p>Web ブラウザ上で高品質な数式表現を行うための JavaScript パッケージである <a href="https://www.mathjax.org/" title="MathJax | Beautiful math in all browsers.">MathJax</a> v2.7.6 がリリースされた。</p>
<ul>
<li><a href="https://www.mathjax.org/mathjax-v2-7-6-now-available/">MathJax v2.7.6 now available | MathJax</a></li>
</ul>
<p>今回はメンテナンス・リリースで <a href="https://www.mathjax.org/" title="MathJax | Beautiful math in all browsers.">MathJax</a> v3 正式リリースに向けた修正のようだ。</p>
<figure lang="en">
<blockquote><q>This is a maintenance release that fixes an issue with the latest.js file that is used to obtain the most current 2.x version of MathJax from one of the CDNs that serves MathJax. The problem is that the most current version is only obtained if the highest version on the CDN is version 2.x.y for some x and y, so when MathJax goes to version 3.0.0 (scheduled for August 31st), latest.js will find that the current CDN version is 3.0.0 and (correctly) will not switch to that, but instead will (incorrectly) use the version from which latest.js was loaded rather than the highest 2.x.y available. This means that when version 3.0 is released, sites using latest.js will fall back from version 2.7.5 to the version that they specified for latests.js. MathJax will still run on those pages, but it may be an earlier version than you have been getting in the past.</q></blockquote>
<figcaption><div>via <q><a href="https://www.mathjax.org/mathjax-v2-7-6-now-available/">MathJax v2.7.6 now available</a></q></div></figcaption>
</figure>
<p>つか v3 の(βが取れた)正式版が8月末(日本では9月初?)にようやく出るのか。
<a href="https://www.mathjax.org/" title="MathJax | Beautiful math in all browsers.">MathJax</a> v3 は configuration が大きく変わると聞いているので,しばらくは要注意だな。</p>
<p>アップデートは計画的に。</p>
<h2>ブックマーク</h2>
<ul>
<li><a href="https://text.baldanders.info/remark/2017/09/getting-started-mathjax-1/">ちょこっと MathJax: 初期設定</a></li>
</ul>
<h2>参考図書</h2>
<div class="hreview">
<div class="photo"><a href="https://www.amazon.co.jp/dp/4297117126?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1"><img src="https://m.media-amazon.com/images/I/41xmBlTiwlL._SL160_.jpg" width="126" alt="photo"></a></div>
<dl>
<dt class="item"><a class="fn url" href="https://www.amazon.co.jp/dp/4297117126?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1">[改訂第8版]LaTeX2ε美文書作成入門</a></dt>
<dd>奥村晴彦 (著), 黒木裕介 (著)</dd>
<dd>技術評論社 2020-11-14</dd>
<dd>大型本</dd>
<dd>4297117126 (ASIN), 9784297117122 (EAN), 4297117126 (ISBN)</dd>
<dd>評価<abbr class="rating fa-sm" title="5"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i></abbr></dd>
</dl>
<p class="description">2020年末に第8版が出てたのに気付かなかったよ。可能なら紙の本も買って常に側に置いておくのが吉。<a href="https://gihyo.jp/book/2020/978-4-297-11712-2">版元</a>には PDF 版もある。</p>
<p class="powered-by">reviewed by <a href='#maker' class='reviewer'>Spiegel</a> on <abbr class="dtreviewed" title="2021-09-05">2021-09-05</abbr> (powered by <a href="https://affiliate.amazon.co.jp/assoc_credentials/home">PA-APIv5</a>)</p>
</div> <!-- LaTeX2ε美文書作成入門 -->
MathJax v2.7.4 is Released
tag:text.Baldanders.info,2018-04-08:/release/2018/04/mathjax-v2_7_4-is-released/
2018-04-08T01:14:06+00:00
2021-09-05T08:45:39+00:00
不具合の修正がメインのようだ。
Spiegel
https://baldanders.info/profile/
<p>Web ブラウザ上で高品質な数式表現を行うための JavaScript パッケージである <a href="https://www.mathjax.org/" title="MathJax | Beautiful math in all browsers.">MathJax</a> v2.7.4 がリリースされた。</p>
<ul>
<li><a href="https://www.mathjax.org/mathjax-v2-7-4-now-available/">MathJax v2.7.4 now available | MathJax</a></li>
<li><a href="https://github.com/mathjax/MathJax/milestone/18?closed=1">MathJax v2.7.4 Milestone</a></li>
</ul>
<p>不具合の修正がメインのようだ。</p>
<figure lang="en">
<blockquote><ul>
<li>Prevent infinite loop if an autoloaded component fails to load. (#1936)</li>
<li>Always set movablelimits to false in <code>\overset</code> and <code>\underset</code>. (#1929)</li>
<li>CSS reset for box-sizing in HTML-CSS output. (#1942)</li>
<li>Add <code>px</code> to <code>max-width</code> for SVG output containing tags. (#1950)</li>
<li>Properly handle namespaces starting with <code>math</code> in MathML input. (#1951)</li>
<li>Make <code>tex2jax</code> and <code>asciimath2jax</code> rescan after unmatched delimiter. (#1960)</li>
<li>Fix minimum height of accents in scripts. (#1956)</li>
<li>Make monospaced non-breaking space be of correct width. (#1953)</li>
<li>Handle size of centered large operators correctly in mrows. (#1933)</li>
</ul>
</blockquote>
<figcaption><div>via <q><a href="https://www.mathjax.org/mathjax-v2-7-4-now-available/">MathJax v2.7.4 now available</a></q></div></figcaption>
</figure>
<p>アップデートは計画的に。</p>
<h2>ブックマーク</h2>
<ul>
<li><a href="https://text.baldanders.info/remark/2017/09/getting-started-mathjax-1/">ちょこっと MathJax: 初期設定</a></li>
</ul>
<h2>参考図書</h2>
<div class="hreview">
<div class="photo"><a href="https://www.amazon.co.jp/dp/4297117126?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1"><img src="https://m.media-amazon.com/images/I/41xmBlTiwlL._SL160_.jpg" width="126" alt="photo"></a></div>
<dl>
<dt class="item"><a class="fn url" href="https://www.amazon.co.jp/dp/4297117126?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1">[改訂第8版]LaTeX2ε美文書作成入門</a></dt>
<dd>奥村晴彦 (著), 黒木裕介 (著)</dd>
<dd>技術評論社 2020-11-14</dd>
<dd>大型本</dd>
<dd>4297117126 (ASIN), 9784297117122 (EAN), 4297117126 (ISBN)</dd>
<dd>評価<abbr class="rating fa-sm" title="5"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i></abbr></dd>
</dl>
<p class="description">2020年末に第8版が出てたのに気付かなかったよ。可能なら紙の本も買って常に側に置いておくのが吉。<a href="https://gihyo.jp/book/2020/978-4-297-11712-2">版元</a>には PDF 版もある。</p>
<p class="powered-by">reviewed by <a href='#maker' class='reviewer'>Spiegel</a> on <abbr class="dtreviewed" title="2021-09-05">2021-09-05</abbr> (powered by <a href="https://affiliate.amazon.co.jp/assoc_credentials/home">PA-APIv5</a>)</p>
</div> <!-- LaTeX2ε美文書作成入門 -->
ちょこっと MathJax 番外編: mathcomp パッケージの代替え
tag:text.Baldanders.info,2017-12-22:/remark/2017/12/mathcomp-in-mathjax/
2017-12-22T10:15:52+00:00
2021-09-05T08:45:39+00:00
MathJax では \tcdegree コマンドを持っていないようだ。ググってみたら「Unicode を使え」という身も蓋もない回答が見つかった。
Spiegel
https://baldanders.info/profile/
<p>今回は横道に外れて小ネタでいきます。</p>
<ol>
<li><a href="https://text.baldanders.info/remark/2017/09/getting-started-mathjax-1/">ちょこっと MathJax: 初期設定</a></li>
<li><a href="https://text.baldanders.info/remark/2017/09/getting-started-mathjax-2/">ちょこっと MathJax: 基本的な数式表現</a></li>
<li><a href="https://text.baldanders.info/remark/2017/10/getting-started-mathjax-3/">ちょこっと MathJax: インライン数式と別行立て数式</a></li>
<li><a href="https://text.baldanders.info/remark/2017/12/mathcomp-in-mathjax/">ちょこっと MathJax 番外編: mathcomp パッケージの代替え</a> ← イマココ</li>
</ol>
<p>たとえば</p>
<div class="box">
直角は ±90°。
</div>
<p>をインライン数式で書くことを考える。</p>
<p>昔の $\mathrm{\LaTeX}$ は「°」に相当する記号がなく, <code>90^{\circ}</code> などと表記していた。
すなわち</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">直角は $\pm90^{\circ}$。
</span></span></code></pre></div><p>と書いて</p>
<div class="box">
直角は $\pm90^{\circ}$。
</div>
<p>と表示させていたわけだ。
しかし <code>\circ</code> ($\circ$) は角度を表す記号ではなく $+$ や $-$ と同じ2項演算子の記号である。
そこで今は <a href="https://ctan.org/pkg/mathcomp" title="https://ctan.org/pkg/mathcomp">mathcomp</a> パッケージの <code>\tcdegree</code> コマンドを使って</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">直角は $\pm90\tcdegree$。
</span></span></code></pre></div><p>とするのが正しいそうだ<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>。</p>
<p>ところが <a href="https://www.mathjax.org/">MathJax</a> では <code>\tcdegree</code> コマンドを持っていないようで,上の記述ではエラーになる。
<a href="https://www.mathjax.org/">MathJax</a> の<a href="https://docs.mathjax.org/en/latest/input/tex/extensions/" title="The TeX/LaTeX Extension List — MathJax 3.0 documentation">機能拡張</a>でもそれらしいものは見当たらず,誰かが公開してるってわけでもないっぽい。</p>
<p>みんなどうやってるんだ?</p>
<p>ググってみたら「Unicode の「°」文字を使うか <code>\unicode{xb0}</code> で指定しろ」という身も蓋もない回答が見つかった。
どうもそれしかないらしい… sigh</p>
<p>そこで $\mathrm{\LaTeX}$ との互換性を保つため</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">MathJax</span> <span class="o">=</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">tex</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">macros</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">tcdegree</span><span class="o">:</span> <span class="p">[</span><span class="s1">'\\unicode{xb0}'</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">};</span>
</span></span></code></pre></div><p>という感じでマクロを組んでみた。
これで,以下のように表示可能になる。</p>
<div class="box">
直角は $\pm90\tcdegree$。
</div>
<p><a href="https://ctan.org/pkg/mathcomp" title="https://ctan.org/pkg/mathcomp">mathcomp</a> パッケージで使える記号はかなりあるのだが,私がよく使いそうなもののみ以下に挙げる。</p>
<table>
<thead>
<tr>
<th style="text-align:left">Macros</th>
<th style="text-align:left">$\mathrm{\LaTeX}$ Format</th>
<th style="text-align:left">Output</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left"><code>tcdegree: ['\\unicode{xb0}']</code></td>
<td style="text-align:left"><code>$35\tcdegree$</code></td>
<td style="text-align:left">$35\tcdegree$</td>
</tr>
<tr>
<td style="text-align:left"><code>tccelsius: ['\\unicode{x2103}']</code></td>
<td style="text-align:left"><code>$35\\,\tccelsius$</code></td>
<td style="text-align:left">$35\,\tccelsius$</td>
</tr>
<tr>
<td style="text-align:left"><code>tcperthousand: ['\\unicode{x2030}']</code></td>
<td style="text-align:left"><code>$35\\,\tcperthousand$</code></td>
<td style="text-align:left">$35\,\tcperthousand$</td>
</tr>
<tr>
<td style="text-align:left"><code>tcmu: ['\\unicode{x3bc}']</code></td>
<td style="text-align:left"><code>$35\\,\tcmu\mathrm{s}$</code></td>
<td style="text-align:left">$35\,\tcmu\mathrm{s}$</td>
</tr>
<tr>
<td style="text-align:left"><code>tcohm: ['\\unicode{x3a9}']</code></td>
<td style="text-align:left"><code>$35\\,\tcohm$</code></td>
<td style="text-align:left">$35\,\tcohm$</td>
</tr>
</tbody>
</table>
<ul>
<li><code>\tccelsius</code> は <code>\tcdegree\mathrm{C}</code> でもいける(<code>$35\\,\tcdegree\mathrm{C}$</code> → $35\,\tcdegree\mathrm{C}$)。これなら華氏にも応用できる(<code>$35\\,\tcdegree\mathrm{F}$</code> → $35\,\tcdegree\mathrm{F}$)</li>
<li><code>\tcmu</code> は <code>\symup{\mu}</code> みたいにしたいのだが <code>\symup</code> コマンドに相当するものが <a href="https://www.mathjax.org/">MathJax</a> にないっぽい</li>
<li><code>\tcohm</code> は <code>\Omega</code> と等価,というかフォントのバランスを考えると <code>\Omega</code> を使ったほうがいいと思う(<code>$35\\,\Omega$</code> → $35\,\Omega$)</li>
</ul>
<h2>ブックマーク</h2>
<ul>
<li><a href="https://texwiki.texjp.org/?siunitx">siunitx - TeX Wiki</a></li>
</ul>
<h2 id="books">参考図書</h2>
<div class="hreview">
<div class="photo"><a href="https://www.amazon.co.jp/dp/4297117126?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1"><img src="https://m.media-amazon.com/images/I/41xmBlTiwlL._SL160_.jpg" width="126" alt="photo"></a></div>
<dl>
<dt class="item"><a class="fn url" href="https://www.amazon.co.jp/dp/4297117126?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1">[改訂第8版]LaTeX2ε美文書作成入門</a></dt>
<dd>奥村晴彦 (著), 黒木裕介 (著)</dd>
<dd>技術評論社 2020-11-14</dd>
<dd>大型本</dd>
<dd>4297117126 (ASIN), 9784297117122 (EAN), 4297117126 (ISBN)</dd>
<dd>評価<abbr class="rating fa-sm" title="5"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i></abbr></dd>
</dl>
<p class="description">2020年末に第8版が出てたのに気付かなかったよ。可能なら紙の本も買って常に側に置いておくのが吉。<a href="https://gihyo.jp/book/2020/978-4-297-11712-2">版元</a>には PDF 版もある。</p>
<p class="powered-by">reviewed by <a href='#maker' class='reviewer'>Spiegel</a> on <abbr class="dtreviewed" title="2021-09-05">2021-09-05</abbr> (powered by <a href="https://affiliate.amazon.co.jp/assoc_credentials/home">PA-APIv5</a>)</p>
</div> <!-- LaTeX2ε美文書作成入門 -->
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>他の方法としては <a href="https://ctan.org/pkg/siunitx" title="CTAN: Package siunitx">siunitx</a> パッケージを使って <code>\ang{90}</code> のように記述する手がある。 <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</div>
ちょこっと MathJax: インライン数式と別行立て数式
tag:text.Baldanders.info,2017-10-27:/remark/2017/10/getting-started-mathjax-3/
2017-10-27T08:24:58+00:00
2024-01-26T21:38:55+00:00
MathJax の数式の表示には2種類ある。
Spiegel
https://baldanders.info/profile/
<p><a href="https://text.baldanders.info/remark/2017/09/getting-started-mathjax-2/" title="ちょこっと MathJax: 基本的な数式表現">前回</a>からだいぶ間があいたけど,そろそろ続きを。</p>
<ol>
<li><a href="https://text.baldanders.info/remark/2017/09/getting-started-mathjax-1/">ちょこっと MathJax: 初期設定</a></li>
<li><a href="https://text.baldanders.info/remark/2017/09/getting-started-mathjax-2/">ちょこっと MathJax: 基本的な数式表現</a></li>
<li><a href="https://text.baldanders.info/remark/2017/10/getting-started-mathjax-3/">ちょこっと MathJax: インライン数式と別行立て数式</a> ← イマココ</li>
<li><a href="https://text.baldanders.info/remark/2017/12/mathcomp-in-mathjax/">ちょこっと MathJax 番外編: mathcomp パッケージの代替え</a></li>
</ol>
<h2>インライン数式と別行立て数式</h2>
<p>さて,<a href="https://text.baldanders.info/remark/2017/09/getting-started-mathjax-1/" title="ちょこっと MathJax: 初期設定">初期設定</a>の回でも少し言及したが,<a href="https://www.mathjax.org/">MathJax</a> の数式の表示には2種類ある。
まず本文に埋め込まれる形で表示される数式。
これを「インライン数式(in-line math)」と呼ぶ。
インライン数式は <code>\(...\)</code> で囲んで記述する。</p>
<p>たとえば</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-tex" data-lang="tex"><span class="line"><span class="cl">エネルギーと質量には <span class="s">\(</span><span class="nb">E</span><span class="o">=</span><span class="nb">mc^</span><span class="m">2</span><span class="s">\)</span> の関係がある。
</span></span></code></pre></div><p>と記述すると</p>
<div class="box">
エネルギーと質量には \(E=mc^2\) の関係がある。
</div>
<p>のように表示される。</p>
<p>もうひとつは本文とは行を改めて表示される数式。
これを「別行立て数式(displayed equations)」と呼ぶ<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>。
別行立て数式は <code>$$...$$</code> または <code>\[...\]</code> で囲んで記述する。</p>
<p>たとえば</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-tex" data-lang="tex"><span class="line"><span class="cl">エネルギーと質量には <span class="sb">\[</span><span class="nb">E</span><span class="o">=</span><span class="nb">mc^</span><span class="m">2</span><span class="s">\]</span> の関係がある。
</span></span></code></pre></div><p>と記述すると</p>
<div class="box">
エネルギーと質量には \[E=mc^2\] の関係がある。
</div>
<p>のように表示される。</p>
<p>$\mathrm{\LaTeX}$ ではインライン数式については <code>\(...\)</code> ではなく <code>$...$</code> を使う。
なので設定をいじって <code>$...$</code> を有効にしてしまおう。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">MathJax</span> <span class="o">=</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">tex</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">inlineMath</span><span class="o">:</span> <span class="p">[[</span><span class="s1">'$'</span><span class="p">,</span> <span class="s1">'$'</span><span class="p">],</span> <span class="p">[</span><span class="s1">'\\('</span><span class="p">,</span> <span class="s1">'\\)'</span><span class="p">]],</span>
</span></span><span class="line"><span class="cl"> <span class="nx">processEscapes</span><span class="o">:</span> <span class="kc">true</span> <span class="c1">// use \$ to produce a literal dollar sign (true is default)
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">};</span>
</span></span></code></pre></div><p>設定について詳しくは<a href="https://text.baldanders.info/remark/2017/09/getting-started-mathjax-1/" title="ちょこっと MathJax: 初期設定">初期設定</a>の回を参照のこと<sup id="fnref:2"><a href="#fn:2" class="footnote-ref" role="doc-noteref">2</a></sup>。</p>
<h2>Textstyle と Displaystyle</h2>
<p>先程の例で挙げた数式 $E=mc^2$ ではインライン数式と別行立て数式表示に(表示位置以外は)さしたる違いは見られないが,数式によっては表示が明らかに異なる場合がある。
たとえば <code>\sum_{k=1}^n a_k</code> という記述について,インライン数式なら</p>
<div class="box">
たとえば $\sum_{k=1}^n a_k$ という記述について
</div>
<p>となるが,別行立て数式では</p>
<div class="box">
たとえば \[\sum_{k=1}^n a_k\] という記述について
</div>
<p>となる。</p>
<p>インライン数式では,できるだけ数式が本文からはみ出ないように自動的に調節してくれているのである。
これを意図的に変えるには <code>\textstyle</code>, <code>\displaystyle</code>, <code>\limits</code>, <code>\nolimits</code> といったコマンドを使う。
以下に各コマンドを使った場合の表示の違いを挙げる。</p>
<table>
<thead>
<tr>
<th style="text-align:left">$\mathrm{TeX}$ 記法</th>
<th style="text-align:left">表示</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left"><code>\textstyle\sum_{k=1}^n a_k</code></td>
<td style="text-align:left">$\textstyle\sum_{k=1}^n a_k$</td>
</tr>
<tr>
<td style="text-align:left"><code>\displaystyle\sum_{k=1}^n a_k</code></td>
<td style="text-align:left">$\displaystyle\sum_{k=1}^n a_k$</td>
</tr>
<tr>
<td style="text-align:left"><code>\textstyle\sum\limits_{k=1}^n a_k</code></td>
<td style="text-align:left">$\textstyle\sum\limits_{k=1}^n a_k$</td>
</tr>
<tr>
<td style="text-align:left"><code>\displaystyle\sum\nolimits_{k=1}^n a_k</code></td>
<td style="text-align:left">$\displaystyle\sum\nolimits_{k=1}^n a_k$</td>
</tr>
</tbody>
</table>
<h2>分数表記</h2>
<p>もうひとつ。
インライン数式と別行立て数式で気をつけるべきなのが分数の表記である。
たとえば <code>y=1/x</code> を $\mathrm{TeX}$ 記法で記述する場合は <code>y=\frac{1}{x}</code> と書くが,インライン数式の場合は</p>
<div class="box">
たとえば <code>y=1/x</code> は $y=\frac{1}{x}$ と書く
</div>
<p>となり,別行立て数式の場合は</p>
<div class="box">
たとえば <code>y=1/x</code> は \[y=\frac{1}{x}\] と書く
</div>
<p>となる。
しかしインライン数式の場合,これでは文字が小さくなりすぎるし,結局は本文からハミ出してしまう。
なのでインライン数式では <code>\frac</code> を使うのではなくそのまま <code>$y=1/x$</code> と書くのが良いとされている。</p>
<div class="box">
たとえば <code>y=1/x</code> は $y=1/x$ と書く
</div>
<p>なお分数でも textstyle と displaystyle に相当する <code>\tfrac</code> と <code>\dfrac</code> がある。</p>
<table>
<thead>
<tr>
<th style="text-align:left">$\mathrm{TeX}$ 記法</th>
<th style="text-align:center">表示</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left"><code>y=\tfrac{1}{x}</code></td>
<td style="text-align:center">$y=\tfrac{1}{x}$</td>
</tr>
<tr>
<td style="text-align:left"><code>y=\dfrac{1}{x}</code></td>
<td style="text-align:center">$y=\dfrac{1}{x}$</td>
</tr>
</tbody>
</table>
<p>ちなみに <a href="https://www.mathjax.org/">MathJax</a> でも連分数(<code>\cfrac</code>)が使える<sup id="fnref:3"><a href="#fn:3" class="footnote-ref" role="doc-noteref">3</a></sup>。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-tex" data-lang="tex"><span class="line"><span class="cl"><span class="sb">\[</span><span class="nb">
</span></span></span><span class="line"><span class="cl"><span class="nb">b_</span><span class="m">0</span><span class="nb"> </span><span class="o">+</span><span class="nb"> </span><span class="nv">\cfrac</span><span class="nb">{c_</span><span class="m">1</span><span class="nb">}{b_</span><span class="m">1</span><span class="nb"> </span><span class="o">+</span><span class="nb">
</span></span></span><span class="line"><span class="cl"><span class="nb"> </span><span class="nv">\cfrac</span><span class="nb">{c_</span><span class="m">2</span><span class="nb">}{b_</span><span class="m">2</span><span class="nb"> </span><span class="o">+</span><span class="nb">
</span></span></span><span class="line"><span class="cl"><span class="nb"> </span><span class="nv">\cfrac</span><span class="nb">{c_</span><span class="m">3</span><span class="nb">}{b_</span><span class="m">3</span><span class="nb"> </span><span class="o">+</span><span class="nb">
</span></span></span><span class="line"><span class="cl"><span class="nb"> </span><span class="nv">\cfrac</span><span class="nb">{c_</span><span class="m">4</span><span class="nb">}{b_</span><span class="m">4</span><span class="nb"> </span><span class="o">+</span><span class="nb"> </span><span class="nv">\cdots</span><span class="nb">}}}}
</span></span></span><span class="line"><span class="cl"><span class="nb"></span><span class="s">\]</span>
</span></span></code></pre></div><figure><div class="mathjax box">
\[
b_0 + \cfrac{c_1}{b_1 +
\cfrac{c_2}{b_2 +
\cfrac{c_3}{b_3 +
\cfrac{c_4}{b_4 + \cdots}}}}
\]
</div></figure>
<p>流石にこれはインライン数式じゃ無理だよね(笑)</p>
<h2>インライン数式で高さを揃える。</h2>
<p>インライン数式では <code>$\sqrt{g}$</code> と <code>$\sqrt{h}$</code> のように数式によって高さが不揃いになるものがある。</p>
<div class="box">
インライン数式では $\sqrt{g}$ と $\sqrt{h}$ の高さが不揃い
</div>
<p>高さを揃えるには <code>\mathstrut</code> コマンドを使って以下のように記述する。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">\mathstrut コマンドを使って $\sqrt{\mathstrut g}$ と $\sqrt{\mathstrut h}$ の高さを揃えてみる
</span></span></code></pre></div><div class="box">
<code>\mathstrut</code> コマンドを使って $\sqrt{\mathstrut g}$ と $\sqrt{\mathstrut h}$ の高さを揃えてみる
</div>
<p>さらに <code>\smash</code> コマンドとも組み合わせて</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">\smash コマンドも使って $\sqrt{\smash[b]{\mathstrut g}}$ と $\sqrt{\smash[b]{\mathstrut h}}$ を揃えてみる
</span></span></code></pre></div><div class="box">
<code>\smash</code> コマンドも使って $\sqrt{\smash[b]{\mathstrut g}}$ と $\sqrt{\smash[b]{\mathstrut h}}$ を揃えてみる
</div>
<p>とするともうちょっとだけいい感じになるようである<sup id="fnref:4"><a href="#fn:4" class="footnote-ref" role="doc-noteref">4</a></sup>。
折角なのでマクロに組み込んでしまおう。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">MathJax</span> <span class="o">=</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">tex</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">macros</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">ssqrt</span><span class="o">:</span> <span class="p">[</span><span class="s1">'\\sqrt{\\smash[b]{\\mathstrut #1}}'</span><span class="p">,</span> <span class="mi">1</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">};</span>
</span></span></code></pre></div><p>これで以下のように書けば</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">\smash コマンドも使って $\ssqrt{g}$ と $\ssqrt{h}$ を揃えてみる
</span></span></code></pre></div><p>同じ結果が得られる。</p>
<div class="box">
<code>\smash</code> コマンドも使って $\ssqrt{g}$ と $\ssqrt{h}$ を揃えてみる
</div>
<h2>別行立て数式に番号を振る</h2>
<p>別行立て数式では数式に番号を振ることができる。たとえば <code>\[E=mc^2\]</code> に (a) をいう番号を振りたければ <code>\tag</code> コマンドを使って <code>\[E=mc^2 \tag{a}\]</code> とする。</p>
<figure><div class="mathjax box">
\[E=mc^2 \tag{a}\]
</div></figure>
<p>この番号にはラベル <code>\label</code> を付けて参照することができる。
たとえば <code>\[E=mc^2 \tag{b}\label{eq-b}\]</code> としておいて</p>
<figure><div class="mathjax box">
\[E=mc^2 \tag{b}\label{eq-b}\]
</div></figure>
<p>このラベルを参照するには <code>\eqref{eq-b}</code> でこのように →\eqref{eq-b}← 表示できる(<code>$...$</code> で囲まなくてもよい)<sup id="fnref:5"><a href="#fn:5" class="footnote-ref" role="doc-noteref">5</a></sup>。</p>
<h3>数式に通し番号を振る</h3>
<p>ページ内で通し番号を振りたい場合は,以下のように設定を既定値(<code>none</code>)から変更する(オプション設定については<a href="https://text.baldanders.info/remark/2017/09/getting-started-mathjax-1/" title="ちょこっと MathJax: 初期設定">初期設定</a>の回を参照)。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">MathJax</span> <span class="o">=</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">tex</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">tags</span><span class="o">:</span> <span class="s1">'ams'</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">};</span>
</span></span></code></pre></div><p>実際に番号を振るには数式を <code>\[...\]</code> で囲むのではなく <code>\begin{equation}...\end{equation}</code> で囲む。
自動で番号が振られるので <code>\tag</code> コマンドは不要である。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-tex" data-lang="tex"><span class="line"><span class="cl">エネルギーと質量には
</span></span><span class="line"><span class="cl"><span class="k">\begin</span><span class="nb">{</span>equation<span class="nb">}</span>
</span></span><span class="line"><span class="cl"> E=mc<span class="nb">^</span>2 <span class="k">\label</span><span class="nb">{</span>eq-1st<span class="nb">}</span>
</span></span><span class="line"><span class="cl"><span class="k">\end</span><span class="nb">{</span>equation<span class="nb">}</span>
</span></span><span class="line"><span class="cl">の関係がある。
</span></span></code></pre></div><div class="box">
エネルギーと質量には
\begin{equation}
E=mc^2 \label{eq-1st}
\end{equation}
の関係がある。
</div>
<p>参照も同様に →\eqref{eq-1st}← 表示できる。</p>
<p>余談だが <code>\begin</code> と <code>\end</code> で囲まれた領域を $\mathrm{\LaTeX}$ では「環境」と呼ぶ。
<code>\begin{foober}...\end{foober}</code> なら「<code>foobar</code> 環境」と呼んだりする。</p>
<p><code>equation</code> にアスタリスクを付けた <code>equation*</code> 環境では,環境内の数式を自動採番の対象外にできる<sup id="fnref:6"><a href="#fn:6" class="footnote-ref" role="doc-noteref">6</a></sup>。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-tex" data-lang="tex"><span class="line"><span class="cl">エネルギーと質量には
</span></span><span class="line"><span class="cl"><span class="k">\begin</span><span class="nb">{</span>equation*<span class="nb">}</span>
</span></span><span class="line"><span class="cl"> E=mc<span class="nb">^</span>2
</span></span><span class="line"><span class="cl"><span class="k">\end</span><span class="nb">{</span>equation*<span class="nb">}</span>
</span></span><span class="line"><span class="cl">の関係がある。
</span></span></code></pre></div><div class="box">
エネルギーと質量には
\begin{equation*}
E=mc^2
\end{equation*}
の関係がある。
</div>
<p><code>equation</code> 環境以外にも <code>align</code> 環境や <code>gather</code> 環境なども自動採番の対象となる(自動採番を無効にするアスタリスクも有効)。
<code>align</code> 環境などで特定の式に番号を振りたくない場合は <code>\notag</code> コマンドを使って</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-tex" data-lang="tex"><span class="line"><span class="cl"><span class="k">\begin</span><span class="nb">{</span>align<span class="nb">}</span>
</span></span><span class="line"><span class="cl"> (a+b)<span class="nb">^</span>2 <span class="nb">&</span>= a<span class="nb">^</span>2+2ab+b<span class="nb">^</span>2 <span class="k">\\</span>
</span></span><span class="line"><span class="cl"> (a-b)<span class="nb">^</span>2 <span class="nb">&</span>= a<span class="nb">^</span>2-2ab+b<span class="nb">^</span>2 <span class="k">\notag</span> <span class="k">\\</span>
</span></span><span class="line"><span class="cl"> (a+b)<span class="nb">^</span>3 <span class="nb">&</span>= a<span class="nb">^</span>3+3a<span class="nb">^{</span>2<span class="nb">}</span>b+3ab<span class="nb">^</span>2+b<span class="nb">^</span>3
</span></span><span class="line"><span class="cl"><span class="k">\end</span><span class="nb">{</span>align<span class="nb">}</span>
</span></span></code></pre></div><div class="box">
\begin{align}
(a+b)^2 &= a^2+2ab+b^2 \\
(a-b)^2 &= a^2-2ab+b^2 \notag \\
(a+b)^3 &= a^3+3a^{2}b+3ab^2+b^3
\end{align}
</div>
<p>とすればよい。
また複数の数式を <code>split</code> 環境や <code>aligned</code> 環境で囲むことで複数の数式の塊に一つの番号を振ることもできる<sup id="fnref:7"><a href="#fn:7" class="footnote-ref" role="doc-noteref">7</a></sup>。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-tex" data-lang="tex"><span class="line"><span class="cl"><span class="k">\begin</span><span class="nb">{</span>equation<span class="nb">}</span>
</span></span><span class="line"><span class="cl"> <span class="k">\begin</span><span class="nb">{</span>split<span class="nb">}</span>
</span></span><span class="line"><span class="cl"> (a+b)<span class="nb">^</span>2 <span class="nb">&</span>= a<span class="nb">^</span>2+2ab+b<span class="nb">^</span>2 <span class="k">\\</span>
</span></span><span class="line"><span class="cl"> (a-b)<span class="nb">^</span>2 <span class="nb">&</span>= a<span class="nb">^</span>2-2ab+b<span class="nb">^</span>2 <span class="k">\\</span>
</span></span><span class="line"><span class="cl"> (a+b)<span class="nb">^</span>3 <span class="nb">&</span>= a<span class="nb">^</span>3+3a<span class="nb">^{</span>2<span class="nb">}</span>b+3ab<span class="nb">^</span>2+b<span class="nb">^</span>3
</span></span><span class="line"><span class="cl"> <span class="k">\end</span><span class="nb">{</span>split<span class="nb">}</span>
</span></span><span class="line"><span class="cl"><span class="k">\end</span><span class="nb">{</span>equation<span class="nb">}</span>
</span></span></code></pre></div><div class="box">
\begin{equation}
\begin{split}
(a+b)^2 &= a^2+2ab+b^2 \\
(a-b)^2 &= a^2-2ab+b^2 \\
(a+b)^3 &= a^3+3a^{2}b+3ab^2+b^3
\end{split}
\end{equation}
</div>
<h2 id="books">参考図書</h2>
<div class="hreview">
<div class="photo"><a href="https://www.amazon.co.jp/dp/4297117126?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1"><img src="https://m.media-amazon.com/images/I/41xmBlTiwlL._SL160_.jpg" width="126" alt="photo"></a></div>
<dl>
<dt class="item"><a class="fn url" href="https://www.amazon.co.jp/dp/4297117126?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1">[改訂第8版]LaTeX2ε美文書作成入門</a></dt>
<dd>奥村晴彦 (著), 黒木裕介 (著)</dd>
<dd>技術評論社 2020-11-14</dd>
<dd>大型本</dd>
<dd>4297117126 (ASIN), 9784297117122 (EAN), 4297117126 (ISBN)</dd>
<dd>評価<abbr class="rating fa-sm" title="5"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i></abbr></dd>
</dl>
<p class="description">2020年末に第8版が出てたのに気付かなかったよ。可能なら紙の本も買って常に側に置いておくのが吉。<a href="https://gihyo.jp/book/2020/978-4-297-11712-2">版元</a>には PDF 版もある。</p>
<p class="powered-by">reviewed by <a href='#maker' class='reviewer'>Spiegel</a> on <abbr class="dtreviewed" title="2021-09-05">2021-09-05</abbr> (powered by <a href="https://affiliate.amazon.co.jp/assoc_credentials/home">PA-APIv5</a>)</p>
</div> <!-- LaTeX2ε美文書作成入門 -->
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>「インライン数式」「別行立て数式」という言い回しは『<a href="https://www.amazon.co.jp/dp/4774187054?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1" title="Amazon | [改訂第7版]LaTeX2ε美文書作成入門 | 奥村 晴彦, 黒木 裕介 通販">LaTeX2ε美文書作成入門</a>』を踏襲している。ちなみに “in-line math”, “displayed equations” は <a href="https://www.mathjax.org/">MathJax</a> のドキュメントでの言い回し。 <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:2">
<p><a href="https://text.baldanders.info/remark/2017/09/getting-started-mathjax-1/" title="ちょこっと MathJax: 初期設定">初期設定</a>の回でも言及しているが <code>processEscapes</code> はパラグラフ <code><p>...</p></code> 内でのみ有効なようだ。つまり <code>processEscapes</code> が有効な状態では,パラグラフ内の <code>\(...\)</code> や <code>\[...\]</code> がエスケープされてしまうので注意すること。 <a href="#fnref:2" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:3">
<p>出典は『<a href="https://www.amazon.co.jp/dp/4774187054?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1" title="Amazon | [改訂第7版]LaTeX2ε美文書作成入門 | 奥村 晴彦, 黒木 裕介 通販">LaTeX2ε美文書作成入門</a>』より。 <a href="#fnref:3" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:4">
<p>これも『<a href="https://www.amazon.co.jp/dp/4774187054?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1" title="Amazon | [改訂第7版]LaTeX2ε美文書作成入門 | 奥村 晴彦, 黒木 裕介 通販">LaTeX2ε美文書作成入門</a>』を参考にした。いつもお世話になっています。 <a href="#fnref:4" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:5">
<p>数式参照用の id は <a href="https://www.mathjax.org/">MathJax</a> で動的に生成されているので,ページ外からの参照はお勧めできない。 <a href="#fnref:5" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:6">
<p>実は <code>\[...\]</code> は <code>equation*</code> 環境と等価である。 <a href="#fnref:6" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:7">
<p><code>split</code> 環境は自動採番の対象外である。 <a href="#fnref:7" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</div>
ちょこっと MathJax: 基本的な数式表現
tag:text.Baldanders.info,2017-09-28:/remark/2017/09/getting-started-mathjax-2/
2017-09-28T13:25:54+00:00
2021-09-05T08:45:39+00:00
今回は基本的な数式の書き方を説明していこう。
Spiegel
https://baldanders.info/profile/
<p>さて,初期設定は<a href="https://text.baldanders.info/remark/2017/09/getting-started-mathjax-1/" title="ちょこっと MathJax: 初期設定">前回</a>で完了したので,今回は基本的な数式の書き方を説明していこう。</p>
<ol>
<li><a href="https://text.baldanders.info/remark/2017/09/getting-started-mathjax-1/">ちょこっと MathJax: 初期設定</a></li>
<li><a href="https://text.baldanders.info/remark/2017/09/getting-started-mathjax-2/">ちょこっと MathJax: 基本的な数式表現</a> ← イマココ</li>
<li><a href="https://text.baldanders.info/remark/2017/10/getting-started-mathjax-3/">ちょこっと MathJax: インライン数式と別行立て数式</a></li>
<li><a href="https://text.baldanders.info/remark/2017/12/mathcomp-in-mathjax/">ちょこっと MathJax 番外編: mathcomp パッケージの代替え</a></li>
</ol>
<h2 id="rule">数式表現の「お約束」</h2>
<p>初っ端からナニだが,数式を書く際には昔からある「お約束」が存在する。</p>
<p>まず最初に,大原則として「数式で使う文字はイタリック体<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>で書く」というのがある。
たとえば,こんな感じだ。</p>
<div class="box">
エネルギーと質量には $$E=mc^2$$ の関係がある。
</div>
<p>$E$ や $m$ や $c$ の文字がイタリック体になっているのが分かるだろうか。
この大原則をベースに以下の3つの例外が存在する(『<a href="https://www.amazon.co.jp/dp/4774187054?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1" title="Amazon | [改訂第7版]LaTeX2ε美文書作成入門 | 奥村 晴彦, 黒木 裕介 通販">LaTeX2ε美文書作成入門</a>』より引用)。</p>
<ul>
<li>数字はローマン体にする($\mathit{3.14}$ ではなく $3.14$)</li>
<li>複数文字からなる名前はローマン体にする($sin\,x$ ではなく $\sin x$)</li>
<li>単位記号はローマン体にする($3\,m$ ではなく $3\,\mathrm{m}$)</li>
</ul>
<p>最初の大原則と併せて,以上の4つのルールを守れば簡単な数式表現は問題ない。
$\mathrm{\TeX}$ ではこのルールを加味した組版を半自動で行い(万能ではない), <a href="https://www.mathjax.org/" title="MathJax | Beautiful math in all browsers.">MathJax</a> についても $\mathrm{\TeX}$ と同様の処理ができる。</p>
<p>たとえば数字に関しては普通に <code>1+2=3</code> と書けば $1+2=3$ と表示される。
数字部分がローマン体になっているのが分かるだろう。</p>
<p>$\sin$ 関数のように有名な名前については <code>\sin</code> のようにあらかじめコマンド<sup id="fnref:2"><a href="#fn:2" class="footnote-ref" role="doc-noteref">2</a></sup> が登録されていて, <code>\sin x</code> と書けば $\sin x$ と表示される。
コマンドがないものについては <code>\mathrm</code> コマンドで文字をローマン体に変更できる。
たとえば $3\,\mathrm{m}$ と表示するには <code>3\\,\mathrm{m}</code> と書けばよい。</p>
<h3>その他の数式組版規則</h3>
<p>実は ISO や JIS で決められている数式の組版規則はもう少し複雑である。</p>
<p>たとえば円周率 $\mathit{\pi}$ は1文字だけど定数の名前なので</p>
$$
\mathrm{\pi}=3.1415\dots
$$
<p>とローマン体にする(TeX フォントだと違いが分からないが)。
また以下の式について</p>
$$
F(x)=\int\\,f(x)\\,\mathrm{d}x
$$
<p>$\mathrm{d}x$ の d はイタリック体 $d$ ではなくローマン体 $\mathrm{d}$ にする,といった決まりがあるそうだ。</p>
<p>更に数学論文や科学論文では所属する学会や研究会などによってローカル・ルールが存在し,名前についても特定のものについては $\mathrm{Spin}(n)$ ではなく $Spin(n)$ と書きなさい,とか色々あるらしい。
数式を論文などで記述する際は,このような細かいルールにも注意する必要がある。</p>
<h2>数式は「空き」が重要</h2>
<p>少し遡って,先程 $3\,\mathrm{m}$ と表示するのに <code>3\\,\mathrm{m}</code> と記述したことを覚えているだろうか。
この中の <code>\\,</code> は「空き」を意味するコマンドである。</p>
<p>明示的な「空き」は見た目を分かりやすく調整するために重要である。</p>
<p>たとえば $\sqrt{2} \times x$ を表現したい場合,素朴に “<code>\sqrt{2}x</code>” と記述すると $\sqrt{2}x$ となり, $\sqrt{2x}$ なのか $\sqrt{2}\,x$ なのか見た目でわかり辛い。
そこで明示的に「空き」を入れて “<code>\sqrt{2}\\,x</code>” と記述することで,はっきりと $\sqrt{2}\,x$ であることを示せる<sup id="fnref:3"><a href="#fn:3" class="footnote-ref" role="doc-noteref">3</a></sup>。</p>
<p>「空き」を示すコマンドは他にもあるのだが,とりあえず簡単な数式を書く場合には <code>\\,</code> コマンドだけ覚えておけばOKである。</p>
<h2 id="limit"><a href="https://www.mathjax.org/" title="MathJax | Beautiful math in all browsers.">MathJax</a> の制限事項</h2>
<p>残念ながら <a href="https://www.mathjax.org/" title="MathJax | Beautiful math in all browsers.">MathJax</a> には $\mathrm{\TeX}$ にない制限が存在する。</p>
<!-- Mathjax v3 は今のところ Neo-Euler をサポートしないためコメントアウトしておく
### Neo-Euler には斜体がない
数式好きの方に人気がある(らしい) Euler 書体は [MathJax] では Web フォント `Neo-Euler` として提供されている。
`Neo-Euler` を利用するためには `HTML-CSS` オプションを以下のように設定する[^chtml1]。
[^chtml1]: Web フォントの指定は `TeX-AMS_HTML` コンフィギュレーションでのみ可能である。 `TeX-AMS_CHTML` では今のところ `"TeX"` 固定になっている。
```html
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
"HTML-CSS": {
availableFonts: [],
preferredFont: null,
webFont: "Neo-Euler"
}
});
</script>
```
この設定で以下の数式
(「[コンクリートなフォントとか ~Computer Modern の兄弟たち~](http://zrbabbler.sp.land.to/concrete.html)」より引用)
```html
$$
\left( \int_0^\infty \frac{\sin x}{\sqrt x}\\,\mathrm{d}x \right)^2 =
\prod_{k=1}^\infty \frac{4k^2}{4k^2-1} \neq \frac{\pi}{2010}
$$
```
を処理すると以下のような表示になる。
<figure style='margin:0 auto;text-align:center;'><a href="https://photo.baldanders.info/flickr/37112149590/"><img src="https://photo.baldanders.info/flickr/image/37112149590_m.png" srcset="https://photo.baldanders.info/flickr/image/37112149590_m.png 500w" sizes="(min-width:600px) 500px, 80vw" alt="Neo-Euler web fonts" loading="lazy"></a><figcaption><div><a href="https://photo.baldanders.info/flickr/37112149590/">Neo-Euler web fonts</a></div></figcaption>
</figure>
一方,同じものを $\mathrm{\LaTeX}$ で Euler + Concrete を指定して 処理すると以下のようになる。
<figure style='margin:0 auto;text-align:center;'><a href="https://photo.baldanders.info/flickr/36657659994/"><img src="https://photo.baldanders.info/flickr/image/36657659994_m.png" srcset="https://photo.baldanders.info/flickr/image/36657659994_m.png 500w" sizes="(min-width:600px) 500px, 80vw" alt="Euler fonts" loading="lazy"></a><figcaption><div><a href="https://photo.baldanders.info/flickr/36657659994/">Euler fonts</a></div></figcaption>
</figure>
両者の違いが分かるだろうか(文字の大きさとかは無視してね)。
ポイントは数字と $\sin$ 関数である。
実は,現行の `Neo-Euler` には文字と記号の一部に斜体(slant)が用意されていない[^euler1]。
このせいで(通常ルールとは異なり)数式表現が「立体(upright)」になるため,名前も変数も数字も同じに見えてしまうのだ(厳密には違うけど)。
[^euler1]: [MathJax] のドキュメントには「イタリック体がない」と書かれているが,厳密には「斜体」のことを言っているようだ。そもそも Euler 書体は手書き文字が元になっていて見た目はイタリック体っぽいデザインをしているため,「イタリック体がない」という言い方は誤解を招く。
<figure lang="en">
<blockquote>
<q>Note that not all mathematical characters are available in all fonts (e.g., Neo-Euler does not include italic characters), so some mathematics may work better in some fonts than in others.</q>
</blockquote>
<figcaption><div>via <q><a href="http://docs.mathjax.org/en/latest/options/output-processors/HTML-CSS.html">The HTML-CSS output processor</a></q></div></figcaption>
</figure>
$\mathrm{\LaTeX}$ っぽく $\sin$ の見た目だけでも変えたいのであれば,ちょっと裏技的だが以下のようにする。
まず `HTML-CSS` オプションに `mtextFontInherit` を追加し true をセットする(`mtextFontInherit` については[前回]の記事を参照)。
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/x-mathjax-config"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="nx">MathJax</span><span class="p">.</span><span class="nx">Hub</span><span class="p">.</span><span class="nx">Config</span><span class="p">({</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"HTML-CSS"</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">availableFonts</span><span class="o">:</span> <span class="p">[],</span>
</span></span><span class="line"><span class="cl"> <span class="nx">preferredFont</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nx">webFont</span><span class="o">:</span> <span class="s2">"Neo-Euler"</span><span class="p">,</span>
</span></span><span class="line hl"><span class="cl"> <span class="nx">mtextFontInherit</span><span class="o">:</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">});</span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">script</span><span class="p">></span></span></span></code></pre></div>
そして `\sin` コマンドを `\text{sin}` に書き換える。
以下がその結果である。
<figure style='margin:0 auto;text-align:center;'><a href="https://photo.baldanders.info/flickr/36698887063/"><img src="https://photo.baldanders.info/flickr/image/36698887063_m.png" srcset="https://photo.baldanders.info/flickr/image/36698887063_m.png 500w" sizes="(min-width:600px) 500px, 80vw" alt="Neo-Euler web fonts 2" loading="lazy"></a><figcaption><div><a href="https://photo.baldanders.info/flickr/36698887063/">Neo-Euler web fonts 2</a></div></figcaption>
</figure>
どうやったかというと `\text{sin}` によって `sin` を(数式フォントではなく)本文のフォントに書き換えたのだ。
まぁ,これで見た目はそれっぽくなったが,やはり無理矢理な感じが強いので, [MathJax] で `Neo-Euler` を使うのは(今のところ)お薦めできない[^euler2]。
[^euler2]: $\mathrm{\LaTeX}$ でも Euler を Concrete と組み合わせるのが普通みたいなので, [MathJax] でも Web フォントを複数指定できるようにするか Concrete + Euler の組み合わせをひとつのフォントセットとして定義しないとダメだと思う。
-->
<h3>不等号に注意</h3>
<p>$\mathrm{\TeX}$ 記法では不等号記号はそのまま <code><</code> や <code>></code> 文字を使うのだが, HTML ではこれらの文字は要素タグ(<code><body></code> など)を指す記号として使われるため,そのまま数式に使うとブラウザによっては誤動作を起こす可能性がある。
そのため <a href="https://www.mathjax.org/" title="MathJax | Beautiful math in all browsers.">MathJax</a> では不等号記号を示すコマンドが用意されている。</p>
<p>たとえば $a \lt b$ は <code>$a \lt b$</code> と記述する。
同様に $a \gt b$ は <code>$a \gt b$</code> と記述する。</p>
<p><code>\lt</code> や <code>\gt</code> は標準の $\mathrm{\TeX}$ 記法には存在しないコマンドなので,数式を流用する場合には注意が必要である。
あるいは $\mathrm{\LaTeX}$ 側で</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">\newcommand{\lt}{<}
</span></span><span class="line"><span class="cl">\newcommand{\gt}{>}
</span></span></code></pre></div><p>のようにコマンドを定義しておく手もある。</p>
<h2 id="benefit">TeX 記法のメリットは可搬性にある</h2>
<p>こうした細かい面倒がありつつも $\mathrm{\TeX}$ 記法を使う理由は,記述の可搬性にある。
数式を $\mathrm{\TeX}$ 記法で書けば,それはそのまま他のブログや論文に流用できるし,式の構成をちょこちょこっと変えて「翻案」するのも簡単である。
これは MathML のような見た目だけを制御する記述形式にはない利点と言える<sup id="fnref:4"><a href="#fn:4" class="footnote-ref" role="doc-noteref">4</a></sup>。</p>
<p>というわけで, <a href="https://www.mathjax.org/" title="MathJax | Beautiful math in all browsers.">MathJax</a> で積極的に数式を書いて読んで流用していくのがいいと思う。</p>
<!--
- [MathJaxでEuler(オイラー)フォントを使ったときの不具合](http://www.math.sci.hokudai.ac.jp/~yano/memo/mathjax_euler.html) : `mtextFontInherit` には true または false が入るので,文字列 `"false"` をセットするのは間違い。おそらく文字列を内部で無理やり true に評価してるんだと思う。この辺は流石 JavaScript というところか(笑)
- [数式用フォントで遊ぶ](https://text.baldanders.info/remark/2017/10/math-fonts/) : $\mathrm{TeX}$ における数式表現についてフォントを中心に書いてみた
-->
<h2 id="bookmark">ブックマーク</h2>
<ul>
<li><a href="https://pineapple.blog/%E6%96%9C%E4%BD%93%E3%81%A8%E3%82%A4%E3%82%BF%E3%83%AA%E3%83%83%E3%82%AF%E4%BD%93-68dda513eca2">斜体とイタリック体 – Pineapple Blog</a></li>
<li><a href="https://oku.edu.mie-u.ac.jp/~okumura/javascript/mathjax.html">MathJaxによる数式表示</a></li>
<li><a href="https://zenn.dev/wsuzume/articles/b0b3a51cac5d7fe4555b">数学記号記法一覧</a></li>
<li><a href="https://zenn.dev/wsuzume/articles/5d9a4080533413212bf3">数学記号記法一覧(文字装飾・ギリシャ文字・飾り文字)</a></li>
</ul>
<h2 id="books">参考図書</h2>
<div class="hreview">
<div class="photo"><a href="https://www.amazon.co.jp/dp/4297117126?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1"><img src="https://m.media-amazon.com/images/I/41xmBlTiwlL._SL160_.jpg" width="126" alt="photo"></a></div>
<dl>
<dt class="item"><a class="fn url" href="https://www.amazon.co.jp/dp/4297117126?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1">[改訂第8版]LaTeX2ε美文書作成入門</a></dt>
<dd>奥村晴彦 (著), 黒木裕介 (著)</dd>
<dd>技術評論社 2020-11-14</dd>
<dd>大型本</dd>
<dd>4297117126 (ASIN), 9784297117122 (EAN), 4297117126 (ISBN)</dd>
<dd>評価<abbr class="rating fa-sm" title="5"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i></abbr></dd>
</dl>
<p class="description">2020年末に第8版が出てたのに気付かなかったよ。可能なら紙の本も買って常に側に置いておくのが吉。<a href="https://gihyo.jp/book/2020/978-4-297-11712-2">版元</a>には PDF 版もある。</p>
<p class="powered-by">reviewed by <a href='#maker' class='reviewer'>Spiegel</a> on <abbr class="dtreviewed" title="2021-09-05">2021-09-05</abbr> (powered by <a href="https://affiliate.amazon.co.jp/assoc_credentials/home">PA-APIv5</a>)</p>
</div> <!-- LaTeX2ε美文書作成入門 -->
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>$\mathrm{\TeX}$ ではイタリック体(italics)と斜体(slanted)は異なる字体である。また斜体はしばしばローマン体(Roman)から合成される場合がある。 <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:2">
<p>$\mathrm{\TeX}$ では <code>\</code> から始まる文字列をコマンド(『<a href="https://www.amazon.co.jp/dp/4774187054?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1" title="Amazon | [改訂第7版]LaTeX2ε美文書作成入門 | 奥村 晴彦, 黒木 裕介 通販">LaTeX2ε美文書作成入門</a>』では「命令」)という。 <code>\sin</code> は $\sin$ 関数を表すコマンドである。主な数式コマンドについては『<a href="https://www.amazon.co.jp/dp/4774187054?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1" title="Amazon | [改訂第7版]LaTeX2ε美文書作成入門 | 奥村 晴彦, 黒木 裕介 通販">LaTeX2ε美文書作成入門</a>』の第5章と第6章に解説があるので,とりあえずは参考になるだろう。 <a href="#fnref:2" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:3">
<p><code>\sin</code> のようなコマンドは演算子と同じ扱いなので “<code>\sin x</code>” と記述しても結果は $\sin x$ となる。ちなみに $x$ を括弧で囲むと $\sin (x)$ となる。 <a href="#fnref:3" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:4">
<p><a href="https://text.baldanders.info/" title="text.Baldanders.info">本ブログ</a>では触れないが, <a href="https://www.mathjax.org/" title="MathJax | Beautiful math in all browsers.">MathJax</a> は <a href="http://asciimath.org/">AsciiMath</a> にも<a href="https://docs.mathjax.org/en/latest/input/asciimath.html" title="AsciiMath Support — MathJax 3.0 documentation">対応</a>している。 <a href="http://asciimath.org/">AsciiMath</a> にも $\mathrm{\TeX}$ 記法と同様のメリットがある。 <a href="http://asciimath.org/">AsciiMath</a> と $\mathrm{\TeX}$ 記法の比較記事は時々目にするが,個人的には使いやすい方を使えばいいと思う。私が $\mathrm{\TeX}$, というか $\mathrm{\LaTeX}$ を気に入っているのは,見た目の美麗さだけを追求する(出来の悪いペイント・ツールのごとき)ことではなく,かといって届かない理想ばかりを追いかける潔癖症なシステムでもなく,賢さと泥臭さを上手く融合させている点にある。そうでなければ,ひとつのシステムが(中身が変貌しつつも)40年近くも継続して使われ続ける筈がない。 <a href="#fnref:4" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</div>
ちょこっと MathJax: 初期設定
tag:text.Baldanders.info,2017-09-27:/remark/2017/09/getting-started-mathjax-1/
2017-09-27T11:02:09+00:00
2021-09-05T08:45:39+00:00
この記事ではまず Web ページ上で MathJax が動くところまで説明していこう。
Spiegel
https://baldanders.info/profile/
<p>ちょっと思いついたので,これから何回かに分けて <a href="https://www.mathjax.org/" title="MathJax | Beautiful math in all browsers.">MathJax</a> について簡単に紹介していきたいと思う。</p>
<ol>
<li><a href="https://text.baldanders.info/remark/2017/09/getting-started-mathjax-1/">ちょこっと MathJax: 初期設定</a> ← イマココ</li>
<li><a href="https://text.baldanders.info/remark/2017/09/getting-started-mathjax-2/">ちょこっと MathJax: 基本的な数式表現</a></li>
<li><a href="https://text.baldanders.info/remark/2017/10/getting-started-mathjax-3/">ちょこっと MathJax: インライン数式と別行立て数式</a></li>
<li><a href="https://text.baldanders.info/remark/2017/12/mathcomp-in-mathjax/">ちょこっと MathJax 番外編: mathcomp パッケージの代替え</a></li>
</ol>
<p><a href="https://www.mathjax.org/" title="MathJax | Beautiful math in all browsers.">MathJax</a> は Web ブラウザ上で数学論文等でも使える高品質な数式表現を行うための JavaScript パッケージで GitHub にリポジトリがある。</p>
<ul>
<li><a href="https://github.com/mathjax">MathJax リポジトリ</a></li>
</ul>
<p>数式表現として $\mathrm{\TeX}$ 記法<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup> が使えるのが特徴で,たとえば HTML ソースに</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">エネルギーと質量には \( E=mc^2 \) の関係がある。
</span></span></code></pre></div><p>と書くとブラウザ側では</p>
<div class="box">
エネルギーと質量には \( E=mc^2 \) の関係がある。
</div>
<p>と適切に表示してくれる<sup id="fnref:2"><a href="#fn:2" class="footnote-ref" role="doc-noteref">2</a></sup>。</p>
<p>この記事ではまず Web ページ上で <a href="https://www.mathjax.org/" title="MathJax | Beautiful math in all browsers.">MathJax</a> が動くところまでを説明していこう。
数式の書き方については<a href="https://text.baldanders.info/remark/2017/09/getting-started-mathjax-2/" title="ちょこっと MathJax: 基本的な数式表現">次回</a>以降に解説していく予定である。</p>
<h2 id="install"><a href="https://www.mathjax.org/" title="MathJax | Beautiful math in all browsers.">MathJax</a> の組み込み</h2>
<p><a href="https://www.mathjax.org/" title="MathJax | Beautiful math in all browsers.">MathJax</a> は v3 より完全に node.js ベースでの開発になった。
したがってサーバ側に組み込むこともできる。
今回は Web ページごとにクライアント側の JavaScript として組み込む方法を紹介する。</p>
<p>といっても組み込み自体は簡単で <a href="https://www.mathjax.org/" title="MathJax | Beautiful math in all browsers.">MathJax</a> は CDN (Content Delivery Network) で配布されているので HTML の <code><head></code> 要素内に以下の行を追加するだけである。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">id</span><span class="o">=</span><span class="s">"MathJax-script"</span> <span class="na">async</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
</span></span></code></pre></div><p><a href="https://www.mathjax.org/" title="MathJax | Beautiful math in all browsers.">MathJax</a> v3 の特定バージョンを指定するには以下のようにバージョンを明記する。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">id</span><span class="o">=</span><span class="s">"MathJax-script"</span> <span class="na">async</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/mathjax@3.1.2/es5/tex-mml-chtml.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
</span></span></code></pre></div><p>なお 2020-09-25 時点の最新バージョンは 3.1.2 である。</p>
<p><a href="https://www.mathjax.org/" title="MathJax | Beautiful math in all browsers.">MathJax</a> v3 は,そのままでは IE (Internet Explorer) に対応していない。
ただし IE11 に対応するのであれば,直前に1行足して</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line hl"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://polyfill.io/v3/polyfill.min.js?features=es6"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">id</span><span class="o">=</span><span class="s">"MathJax-script"</span> <span class="na">async</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
</span></span></code></pre></div><p>などとすればいいらしい。
ちなみに IE11 より前は(Microsoft も <a href="https://www.mathjax.org/" title="MathJax | Beautiful math in all browsers.">MathJax</a> v3 も)既にサポート外なのでご注意を。</p>
<!-- MathJax v3 ではメニューの多言語化はサポートしていないっぽい?
さらにパラメータ部に `locale=ja` を追加すると,数式部分で表示されるコンテキスト・メニューが日本語になる。
<figure style='margin:0 auto;text-align:center;'><a href="https://photo.baldanders.info/flickr/37316621442/"><img src="https://photo.baldanders.info/flickr/image/37316621442_m.png" srcset="https://photo.baldanders.info/flickr/image/37316621442_m.png 500w" sizes="(min-width:600px) 500px, 80vw" alt="MathJax: context menu" loading="lazy"></a><figcaption><div><a href="https://photo.baldanders.info/flickr/37316621442/">MathJax: context menu</a></div></figcaption>
</figure>
ブラボー!
-->
<p>CDN から利用する場合,プロトコルは HTTPS のみで HTTP を明示的に指定しても HTTPS にリダイレクトされるようだ。
最近のブラウザは HTTP と HTTPS が混在するページでは(セキュリティの関係で)上手く表示できない場合があるので注意が必要である。
どうしても HTTP を使いたいなら CDN を使わず自前で環境を用意するほうがいいだろう。</p>
<p>組み込む JavaScript は <code>tex-mml-chtml.js</code> 以外に以下のものがある。</p>
<table>
<thead>
<tr>
<th>JavaScript ファイル</th>
<th>内容</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>tex-chtml.js</code></td>
<td>入力:$\mathrm{\TeX}$ 記法 , 出力: HTML</td>
</tr>
<tr>
<td><code>tex-chtml-full.js</code></td>
<td>入力:$\mathrm{\TeX}$ 記法(フル機能), 出力: HTML</td>
</tr>
<tr>
<td><code>tex-svg.js</code></td>
<td>入力:$\mathrm{\TeX}$ 記法 , 出力: SVG</td>
</tr>
<tr>
<td><code>tex-svg-full.js</code></td>
<td>入力:$\mathrm{\TeX}$ 記法(フル機能), 出力: SVG</td>
</tr>
<tr>
<td><code>tex-mml-chtml.js</code></td>
<td>入力:$\mathrm{\TeX}$ 記法または MathML , 出力: HTML</td>
</tr>
<tr>
<td><code>tex-mml-svg.js</code></td>
<td>入力:$\mathrm{\TeX}$ 記法または MathML , 出力: SVG</td>
</tr>
<tr>
<td><code>mml-chtml.js</code></td>
<td>入力:MathML 記法 , 出力: HTML</td>
</tr>
<tr>
<td><code>mml-svg.js</code></td>
<td>入力:MathML , 出力: SVG</td>
</tr>
</tbody>
</table>
<p>MathML による入力は本記事では割愛する。</p>
<div class="box"><h3>2020-09-25 追記</h3>
<p><a href="https://www.mathjax.org/" title="MathJax | Beautiful math in all browsers.">MathJax</a> を CDN から読み込む際に Chrome や Edge だと上手く行かないらしい。</p>
<ul>
<li><a href="https://atatat.hatenablog.com/entry/tex36_mathjax_err">Texによる数式表現36~MathJax, KaTeXのトラブル - つれづれなる備忘録</a></li>
<li><a href="https://atatat.hatenablog.com/entry/tex37_katex_resolve">Texによる数式表現37~MathJax, KaTeX表示トラブルの要因・解決 - つれづれなる備忘録</a></li>
<li><a href="https://atatat.hatenablog.com/entry/tex38_mathjax_resolve">Texによる数式表現38~MathJaxの表示トラブル解決法 - つれづれなる備忘録</a></li>
</ul>
<p>証明書云々ってこれのことかなぁ。</p>
<ul>
<li><a href="https://news.mynavi.jp/article/20200819-1233144/">9月1日から、398日間を超えるSSL/TLS証明書は信頼性を失うため要注意 | マイナビニュース</a></li>
<li><a href="https://ssl.sakura.ad.jp/column/safari-shortening/">2020年9月よりAppleがSSL証明書の有効期間を13か月に短縮!詳細や対策とは? | さくらのSSL</a></li>
</ul>
<p>でも別に期限切れてないし期間も1年なので問題ないよなぁ。
むしろ <code>cdnjs.cloudflare.com</code> の証明書のほうが(今は問題ないが)将来的にヤバくね? って感じなのだが(笑)</p>
<p>実は自マシンでは既に Chrome を捨てていて(つか Ubuntu では Chrome は既定で入ってない)スマホかタブレットの Chrome で確認するしかないんだけど,そっちは問題なく見れてるんだよなぁ?</p>
<p>対策としては,以下のように <code>cdnjs.cloudflare.com</code> で指定すればいいらしい。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">id</span><span class="o">=</span><span class="s">"MathJax-script"</span> <span class="na">async</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.1.2/es5/tex-mml-chtml.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
</span></span></code></pre></div><p>強いて言えば <code>cdn.jsdelivr.net</code> の証明書を発行しているのが Cloudflare 社の中間 CA ってとこだが,それってブラウザ側の証明書ストアの問題なんじゃ…</p>
<p>まぁとにかく,現象が確認できない以上<a href="https://text.baldanders.info/" title="text.Baldanders.info">本ブログ</a>では対応しないけど,見れない人が頻出するようなら考えます(笑)</p>
</div>
<h2 id="options"><a href="https://www.mathjax.org/" title="MathJax | Beautiful math in all browsers.">MathJax</a> のオプション</h2>
<p><a href="https://www.mathjax.org/" title="MathJax | Beautiful math in all browsers.">MathJax</a> にはいくつかのオプションを設定できる。
オプションの設定には <code><head></code> 要素内に以下のように <code>MathJax</code> インスタンスを作成する(スクリプトの順番に注意)。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line hl"><span class="cl"><span class="p"><</span><span class="nt">script</span><span class="p">></span>
</span></span><span class="line hl"><span class="cl"><span class="nx">MathJax</span> <span class="o">=</span> <span class="p">{</span> <span class="p">...</span> <span class="p">};</span>
</span></span><span class="line hl"><span class="cl"><span class="p"></</span><span class="nt">script</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">id</span><span class="o">=</span><span class="s">"MathJax-script"</span> <span class="na">async</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
</span></span></code></pre></div><p><code>{ ... }</code> の部分に具体的なオプションを記述していく。
全部を説明するのは大変なので,よく使いそうなものを幾つか紹介しよう。
なお,<a href="#mysetting">最後の節</a>に<a href="https://text.baldanders.info/" title="text.Baldanders.info">本ブログ</a>におけるオプションの設定例を挙げているので,以降の解説がウザい方は丸写しでも OK です(笑)</p>
<p>(次節以降に出てくる「インライン数式」および「別行立て数式」については<a href="https://text.baldanders.info/remark/2017/10/getting-started-mathjax-3/" title="ちょこっと MathJax: インライン数式と別行立て数式">第3回</a>で説明する)</p>
<h3><a href="https://docs.mathjax.org/en/latest/options/input/tex.html" title="TeX Input Processor Options — MathJax 3.0 documentation">TeX Input Processor Options</a></h3>
<p>設定項目と既定値は以下の通り。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">MathJax</span> <span class="o">=</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">tex</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">inlineMath</span><span class="o">:</span> <span class="p">[</span> <span class="c1">// start/end delimiter pairs for in-line math
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">[</span><span class="s1">'\\('</span><span class="p">,</span> <span class="s1">'\\)'</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="p">],</span>
</span></span><span class="line"><span class="cl"> <span class="nx">displayMath</span><span class="o">:</span> <span class="p">[</span> <span class="c1">// start/end delimiter pairs for display math
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">[</span><span class="s1">'$$'</span><span class="p">,</span> <span class="s1">'$$'</span><span class="p">],</span>
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="s1">'\\['</span><span class="p">,</span> <span class="s1">'\\]'</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="p">],</span>
</span></span><span class="line"><span class="cl"> <span class="nx">processEscapes</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// use \$ to produce a literal dollar sign
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">processEnvironments</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// process \begin{xxx}...\end{xxx} outside math mode
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">processRefs</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// process \ref{...} outside of math mode
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">digits</span><span class="o">:</span> <span class="sr">/^(?:[0-9]+(?:\{,\}[0-9]{3})*(?:\.[0-9]*)?|\.[0-9]+)/</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="c1">// pattern for recognizing numbers
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">tags</span><span class="o">:</span> <span class="s1">'none'</span><span class="p">,</span> <span class="c1">// or 'ams' or 'all'
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">tagSide</span><span class="o">:</span> <span class="s1">'right'</span><span class="p">,</span> <span class="c1">// side for \tag macros
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">tagIndent</span><span class="o">:</span> <span class="s1">'0.8em'</span><span class="p">,</span> <span class="c1">// amount to indent tags
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">useLabelIds</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// use label name rather than tag for ids
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">multlineWidth</span><span class="o">:</span> <span class="s1">'85%'</span><span class="p">,</span> <span class="c1">// width of multline environment
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">maxMacros</span><span class="o">:</span> <span class="mi">1000</span><span class="p">,</span> <span class="c1">// maximum number of macro substitutions per expression
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">maxBuffer</span><span class="o">:</span> <span class="mi">5</span> <span class="o">*</span> <span class="mi">1024</span><span class="p">,</span> <span class="c1">// maximum size for the internal TeX string (5K)
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">baseURL</span><span class="o">:</span> <span class="c1">// URL for use with links to tags (when there is a <base> tag in effect)
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'base'</span><span class="p">).</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="o">?</span>
</span></span><span class="line"><span class="cl"> <span class="s1">''</span> <span class="o">:</span> <span class="nb">String</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">location</span><span class="p">).</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/#.*$/</span><span class="p">,</span> <span class="s1">''</span><span class="p">))</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">};</span>
</span></span></code></pre></div><p><code>inlineMath</code> はインライン数式の開始・終了デリミタを指定する。
複数列挙できる。</p>
<p>$\mathrm{\LaTeX}$ と同じく <code>$...$</code> 記述を有効にしたいのであれば</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">inlineMath</span><span class="o">:</span> <span class="p">[</span>
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="s1">'$'</span><span class="p">,</span> <span class="s1">'$'</span><span class="p">],</span>
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="s1">'\\('</span><span class="p">,</span> <span class="s1">'\\)'</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="p">],</span>
</span></span></code></pre></div><p>などとする。
これで</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">エネルギーと質量には $E=mc^2$ の関係がある。
</span></span></code></pre></div><div class="box">
エネルギーと質量には $E=mc^2$ の関係がある。
</div>
<p>と記述できる。</p>
<p><code>processEscapes</code> を <code>true</code> にすると(既定値),上述の数式開始・終了デリミタを <code>\</code> 記号でエスケープする<sup id="fnref:3"><a href="#fn:3" class="footnote-ref" role="doc-noteref">3</a></sup>。
たとえば <code>$</code> 文字を表示する場合には <code>\$</code> と記述すればよい。</p>
<p><code>tags</code> で別行立て数式の採番を制御する。
規定値の <code>"none"</code> では自動採番が無効になっている。
ページ内の全ての別行立て数式に対して自動採番を有効にする場合は <code>"all"</code> をセットする。
<code>"ams"</code> をセットした場合の動作については<a href="https://text.baldanders.info/remark/2017/10/getting-started-mathjax-3/" title="ちょこっと MathJax: インライン数式と別行立て数式">第3回</a>を参照のこと。</p>
<p><code>macros</code> 項目を追加して自作のマクロを組み込むこともできる。
こんな感じ<sup id="fnref:4"><a href="#fn:4" class="footnote-ref" role="doc-noteref">4</a></sup>。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">macros</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">ssqrt</span><span class="o">:</span> <span class="p">[</span><span class="s1">'\\sqrt{\\smash[b]{\\mathstrut #1}}'</span><span class="p">,</span> <span class="mi">1</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><p>これで</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">平方根の高さを揃えるには \mathstrut と \smash コマンドを使って $\ssqrt{g}$ と $\ssqrt{h}$ のように表示できる。
</span></span></code></pre></div><div class="box">
平方根の高さを揃えるには <code>\mathstrut</code> と <code>\smash</code> コマンドを使って $\ssqrt{g}$ と $\ssqrt{h}$ のように表示できる。
</div>
<p>のように使うことができる。</p>
<h3><a href="https://docs.mathjax.org/en/latest/options/output/chtml.html" title="CommonHTML Output Processor Options — MathJax 3.0 documentation">CommonHTML Output Processor Options</a></h3>
<p>設定項目と既定値は以下の通り。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">MathJax</span> <span class="o">=</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">chtml</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">scale</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> <span class="c1">// global scaling factor for all expressions
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">minScale</span><span class="o">:</span> <span class="p">.</span><span class="mi">5</span><span class="p">,</span> <span class="c1">// smallest scaling factor to use
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">matchFontHeight</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// true to match ex-height of surrounding font
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">mtextInheritFont</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// true to make mtext elements use surrounding font
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">merrorInheritFont</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// true to make merror text use surrounding font
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">mathmlSpacing</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// true for MathML spacing rules, false for TeX rules
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">skipAttributes</span><span class="o">:</span> <span class="p">{},</span> <span class="c1">// RFDa and other attributes NOT to copy to the output
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">exFactor</span><span class="o">:</span> <span class="p">.</span><span class="mi">5</span><span class="p">,</span> <span class="c1">// default size of ex in em units
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">displayAlign</span><span class="o">:</span> <span class="s1">'center'</span><span class="p">,</span> <span class="c1">// default for indentalign when set to 'auto'
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">displayIndent</span><span class="o">:</span> <span class="s1">'0'</span><span class="p">,</span> <span class="c1">// default for indentshift when set to 'auto'
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">fontURL</span><span class="o">:</span> <span class="s1">'[mathjax]/components/output/chtml/fonts/woff-v2'</span><span class="p">,</span> <span class="c1">// The URL where the fonts are found
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">adaptiveCSS</span><span class="o">:</span> <span class="kc">true</span> <span class="c1">// true means only produce CSS that is used in the processed equations
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">};</span>
</span></span></code></pre></div><p><code>matchFontHeight</code> が <code>true</code> であれば本文の文字の大きさにマッチするよう数式の文字の高さを調節してくれるが,本文が日本語だと却ってバランスが悪いようだ。
したがって <code>false</code> にしておくのがお薦めである。</p>
<!-- MathJax v3 で mtextFontInherit の挙動が変わった? よーわからんので,とりあえずコメントアウトしておく
`mtextFontInherit` は `\text` コマンドで囲まれた文字列の組版規則と書体を指定する。
false なら数式の規則のままだが true であれば数式の周囲の地文(大抵は本文)の組版規則[^rl1]と書体が継承される。
既定値は false。
[^rl1]: 「地文の組版規則」とは要するに HTML/CSS の規則ということだが,`\text` コマンドで囲まれた部分は HTML の要素タグ等(`<code>` タグ等)は使えないようだ。試しにやってみたがエラーになってしまう。
たとえば `mtextFontInherit` を true にして
```html
\begin{alignat*}{2}
(a+b)^2 &= a^2 + 2ab + b^2 & \qquad & \text{展開する} \\
&= a(a + 2b) + b^2 & & \text{a でくくる}
\end{alignat*}
```
と記述した場合は(『[LaTeX2ε美文書作成入門]』より引用)
<div class="box">
\begin{alignat*}{2}
(a+b)^2 &= a^2 + 2ab + b^2 & \qquad & \text{展開する} \\
&= a(a + 2b) + b^2 & & \text{a でくくる}
\end{alignat*}
</div>
と表示される。
「`a でくくる`」の a が数式用の書体でないことに注意。
さらに「`a でくくる`」を「`$a$ でくくる`」とすると
```html
\begin{alignat*}{2}
(a+b)^2 &= a^2 + 2ab + b^2 & \qquad & \text{展開する} \\
&= a(a + 2b) + b^2 & & \text{$a$ でくくる}
\end{alignat*}
```
<div class="box">
\begin{alignat*}{2}
(a+b)^2 &= a^2 + 2ab + b^2 & \qquad & \text{展開する} \\
&= a(a + 2b) + b^2 & & \text{$a$ でくくる}
\end{alignat*}
</div>
と $a$ が数式用の書体になる。
なお,日本語(和文)部分は数式内でも `\text` コマンドの有無に関係なく影響を受けない。
-->
<p><code>displayAlign</code> は別行立て数式の位置を何処に寄せるか指定する。
左寄せ(<code>"left"</code>),右寄せ(<code>"right"</code>),中央寄せ(<code>"center"</code>)を指定できる。
中央寄せ以外のときは <code>displayIndent</code> でインデント幅を指定できる。</p>
<p>たとえば左寄せで2文字分インデントさせた場合は</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">MathJax</span> <span class="o">=</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">chtml</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">displayAlign</span><span class="o">:</span> <span class="s1">'left'</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nx">displayIndent</span><span class="o">:</span> <span class="s1">'2em'</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">};</span>
</span></span></code></pre></div><p>以下のように表示される。</p>
<div class="box">
エネルギーと質量には $$E=mc^2$$ の関係がある。
</div>
<h3><a href="https://docs.mathjax.org/en/latest/options/output/svg.html" title="SVG Output Processor Options — MathJax 3.0 documentation">SVG Output Processor Options</a></h3>
<p>設定項目と既定値は以下の通り。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">MathJax</span> <span class="o">=</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">svg</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">scale</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> <span class="c1">// global scaling factor for all expressions
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">minScale</span><span class="o">:</span> <span class="p">.</span><span class="mi">5</span><span class="p">,</span> <span class="c1">// smallest scaling factor to use
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">matchFontHeight</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// true to match ex-height of surrounding font
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">mtextInheritFont</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// true to make mtext elements use surrounding font
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">merrorInheritFont</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// true to make merror text use surrounding font
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">mathmlSpacing</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// true for MathML spacing rules, false for TeX rules
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">skipAttributes</span><span class="o">:</span> <span class="p">{},</span> <span class="c1">// RFDa and other attributes NOT to copy to the output
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">exFactor</span><span class="o">:</span> <span class="p">.</span><span class="mi">5</span><span class="p">,</span> <span class="c1">// default size of ex in em units
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">displayAlign</span><span class="o">:</span> <span class="s1">'center'</span><span class="p">,</span> <span class="c1">// default for indentalign when set to 'auto'
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">displayIndent</span><span class="o">:</span> <span class="s1">'0'</span><span class="p">,</span> <span class="c1">// default for indentshift when set to 'auto'
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">fontCache</span><span class="o">:</span> <span class="s1">'local'</span><span class="p">,</span> <span class="c1">// or 'global' or 'none'
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">localID</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> <span class="c1">// ID to use for local font cache (for single equation processing)
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">internalSpeechTitles</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// insert <title> tags with speech content
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">titleID</span><span class="o">:</span> <span class="mi">0</span> <span class="c1">// initial id number to use for aria-labeledby titles
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">};</span>
</span></span></code></pre></div><p>内容については前節とほぼ同じなので割愛する。
なお <code>matchFontHeight</code> 項目については <code>false</code> にしても日本語の文章と上手くマッチしない。
残念。</p>
<h3>機能の拡張</h3>
<p>たとえば <a href="https://docs.mathjax.org/en/latest/input/tex/extensions/physics.html" title="physics — MathJax 3.0 documentation"><code>physics</code></a> 拡張を組み込む場合は以下のように記述する。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">MathJax</span> <span class="o">=</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">loader</span><span class="o">:</span> <span class="p">{</span><span class="nx">load</span><span class="o">:</span> <span class="p">[</span><span class="s1">'[tex]/physics'</span><span class="p">]},</span>
</span></span><span class="line"><span class="cl"> <span class="nx">tex</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">packages</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="s1">'[+]'</span><span class="o">:</span> <span class="p">[</span><span class="s1">'physics'</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="p">...</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">};</span>
</span></span></code></pre></div><p>組み込み可能な拡張機能については以下のページを参照のこと。</p>
<ul>
<li><a href="https://docs.mathjax.org/en/latest/input/tex/extensions/index.html">The TeX/LaTeX Extension List — MathJax 3.0 documentation</a></li>
</ul>
<p>ただし <a href="https://docs.mathjax.org/en/latest/input/tex/extensions/physics.html" title="physics — MathJax 3.0 documentation"><code>physics</code></a>, <a href="https://docs.mathjax.org/en/latest/input/tex/extensions/colorV2.html" title="colorV2 — MathJax 3.0 documentation"><code>colorV2</code></a> 以外は標準で組み込まれているようで<sup id="fnref:5"><a href="#fn:5" class="footnote-ref" role="doc-noteref">5</a></sup>,たとえば</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">経済成長と $\ce{CO2}$ 排出量は比例しなくなっている。
</span></span></code></pre></div><div class="box">
経済成長と $\ce{CO2}$ 排出量は比例しなくなっている。
</div>
<p>なんてな感じに書くことができる<sup id="fnref:6"><a href="#fn:6" class="footnote-ref" role="doc-noteref">6</a></sup>。</p>
<h3>Web フォントの指定</h3>
<ul>
<li><a href="https://docs.mathjax.org/en/latest/output/fonts.html">MathJax Font Support — MathJax 3.0 documentation</a></li>
</ul>
<p>今のところ <a href="https://www.mathjax.org/" title="MathJax | Beautiful math in all browsers.">MathJax</a> v3 の CDN では TeX フォントしか対応していない。
将来バージョンで対応するとあるが,フォント群を指定する仕組みだけは用意されているようだ。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">MathJax</span> <span class="o">=</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">chtml</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">fontURL</span><span class="o">:</span> <span class="s1">'[mathjax]/components/output/chtml/fonts/woff-v2'</span> <span class="c1">// The URL where the fonts are found
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">};</span>
</span></span></code></pre></div><p>ただ <a href="https://www.mathjax.org/" title="MathJax | Beautiful math in all browsers.">MathJax</a> v3 で利用可能なフォント群を用意するのは(今のところ)簡単ではなさそうなので「今後に期待」といったところだろうか。</p>
<h2 id="mysetting">このサイトでの設定例</h2>
<p>以上を踏まえて,<a href="https://text.baldanders.info/" title="text.Baldanders.info">本ブログ</a>における <a href="https://www.mathjax.org/" title="MathJax | Beautiful math in all browsers.">MathJax</a> オプションの設定内容を以下に示す。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="nx">MathJax</span> <span class="o">=</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">tex</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">inlineMath</span><span class="o">:</span> <span class="p">[[</span><span class="s1">'$'</span><span class="p">,</span> <span class="s1">'$'</span><span class="p">],</span> <span class="p">[</span><span class="s1">'\\('</span><span class="p">,</span> <span class="s1">'\\)'</span><span class="p">]],</span>
</span></span><span class="line"><span class="cl"> <span class="nx">processEscapes</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nx">tags</span><span class="o">:</span> <span class="s1">'ams'</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nx">macros</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">ssqrt</span><span class="o">:</span> <span class="p">[</span><span class="s1">'\\sqrt{\\smash[b]{\\mathstrut #1}}'</span><span class="p">,</span> <span class="mi">1</span><span class="p">],</span>
</span></span><span class="line"><span class="cl"> <span class="nx">tcdegree</span><span class="o">:</span> <span class="p">[</span><span class="s1">'\\unicode{xb0}'</span><span class="p">],</span>
</span></span><span class="line"><span class="cl"> <span class="nx">tccelsius</span><span class="o">:</span> <span class="p">[</span><span class="s1">'\\unicode{x2103}'</span><span class="p">],</span>
</span></span><span class="line"><span class="cl"> <span class="nx">tcperthousand</span><span class="o">:</span> <span class="p">[</span><span class="s1">'\\unicode{x2030}'</span><span class="p">],</span>
</span></span><span class="line"><span class="cl"> <span class="nx">tcmu</span><span class="o">:</span> <span class="p">[</span><span class="s1">'\\unicode{x3bc}'</span><span class="p">],</span>
</span></span><span class="line"><span class="cl"> <span class="nx">tcohm</span><span class="o">:</span> <span class="p">[</span><span class="s1">'\\unicode{x3a9}'</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="nx">chtml</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">matchFontHeight</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nx">displayAlign</span><span class="o">:</span> <span class="s2">"left"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nx">displayIndent</span><span class="o">:</span> <span class="s2">"2em"</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">};</span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">script</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">id</span><span class="o">=</span><span class="s">"MathJax-script"</span> <span class="na">async</span> <span class="na">src</span><span class="o">=</span><span class="s">"//cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
</span></span></code></pre></div><p>これでようやく準備が整った。</p>
<h2 id="bookmark">ブックマーク</h2>
<ul>
<li>
<p><a href="https://docs.mathjax.org/en/latest/">MathJax Documentation — MathJax 3.0 documentation</a></p>
</li>
<li>
<p><a href="https://oku.edu.mie-u.ac.jp/~okumura/javascript/mathjax.html">MathJaxによる数式表示</a></p>
</li>
<li>
<p><a href="http://gilbert.ninja-web.net/math/mathjax1.html">MathJaxの使い方</a></p>
<ul>
<li><a href="http://gilbert.ninja-web.net/math/mathjax3.html">MathJaxの使い方〈化学編〉</a></li>
</ul>
</li>
<li>
<p><a href="http://forest.watch.impress.co.jp/docs/news/373370.html">世界標準が期待される数式用フォント「STIX Fonts」 - 窓の杜</a></p>
</li>
<li>
<p><a href="https://text.baldanders.info/release/2019/09/mathjax-v3-is-released/">MathJax v3 がリリースされていた</a></p>
</li>
</ul>
<h2 id="books">参考図書</h2>
<div class="hreview">
<div class="photo"><a href="https://www.amazon.co.jp/dp/4297117126?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1"><img src="https://m.media-amazon.com/images/I/41xmBlTiwlL._SL160_.jpg" width="126" alt="photo"></a></div>
<dl>
<dt class="item"><a class="fn url" href="https://www.amazon.co.jp/dp/4297117126?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1">[改訂第8版]LaTeX2ε美文書作成入門</a></dt>
<dd>奥村晴彦 (著), 黒木裕介 (著)</dd>
<dd>技術評論社 2020-11-14</dd>
<dd>大型本</dd>
<dd>4297117126 (ASIN), 9784297117122 (EAN), 4297117126 (ISBN)</dd>
<dd>評価<abbr class="rating fa-sm" title="5"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i></abbr></dd>
</dl>
<p class="description">2020年末に第8版が出てたのに気付かなかったよ。可能なら紙の本も買って常に側に置いておくのが吉。<a href="https://gihyo.jp/book/2020/978-4-297-11712-2">版元</a>には PDF 版もある。</p>
<p class="powered-by">reviewed by <a href='#maker' class='reviewer'>Spiegel</a> on <abbr class="dtreviewed" title="2021-09-05">2021-09-05</abbr> (powered by <a href="https://affiliate.amazon.co.jp/assoc_credentials/home">PA-APIv5</a>)</p>
</div> <!-- LaTeX2ε美文書作成入門 -->
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>厳密には $\mathrm{\TeX}$ 記法ではなく $\mathrm{\LaTeX}$ 記法である。が,ここでは両者を区別することにあまり意味が無いので「$\mathrm{\TeX}$ 記法」で通すことにする。 <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:2">
<p><code>$E=mc^2$</code> という入力に対して $E=mc^2$ と,各文字間を適切に空けたり詰めたりしてくれるのがお分かりだろうか。このように $\mathrm{\TeX}$ では数式を半自動的かつ適切に「組版」してくれるのが特徴である。ただし万能ではない。 <a href="#fnref:2" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:3">
<p><code>processEscapes</code> オプションを有効にすると <code>\(...\)</code> までエスケープされてただの <code>(...)</code> になってしまうので注意すること。というか <code>processEscapes</code> オプションを有効にするなら <code>\(...\)</code> は使わないほうがいいかも。また <code>processEscapes</code> オプションはパラグラフ <code><p>...</p></code> の中でのみ効いているようだ。 <a href="#fnref:3" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:4">
<p><code>ssqrt</code> マクロについては<a href="https://text.baldanders.info/remark/2017/10/getting-started-mathjax-3/" title="ちょこっと MathJax: インライン数式と別行立て数式">第3回</a>で紹介している。 <a href="#fnref:4" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:5">
<p><code>tex-chtml-full.js</code> でフル機能を組み込んだ場合は <a href="https://docs.mathjax.org/en/latest/input/tex/extensions/physics.html" title="physics — MathJax 3.0 documentation"><code>physics</code></a>, <a href="https://docs.mathjax.org/en/latest/input/tex/extensions/colorV2.html" title="colorV2 — MathJax 3.0 documentation"><code>colorV2</code></a> も組み込まれるようだ。 <a href="#fnref:5" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:6">
<p>「<a href="http://wired.jp/2017/03/29/global-carbon-emissions/" title="経済成長とCO2排出量は「比例しなくなっている」:IEA報告書|WIRED.jp">経済成長とCO2排出量は「比例しなくなっている」:IEA報告書</a>」より。 <a href="#fnref:6" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</div>