Dragon Arrow written by Tatsuya Nakaji, all rights reserved animated-dragon-image-0164

MathJax 表示スタイル

updated on 2019-09-30

MathJax 表示スタイル


MathJaxLaTeX


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


導入


CDNを使用して、簡単に導入できる。

<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML">
</script>
<script type="text/x-mathjax-config">
 MathJax.Hub.Config({
 tex2jax: {
 inlineMath: [["\\(","\\)"] ],
 displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
 }
 });
</script>


人によっては、inlineMathの記号を

inlineMath: [['$','$'], ['\\(','\\)']],

のように$も使えるようにしている人もいるかもしれませんが、僕は$は使わずに記事を書いているのでご了承ください。


表示スタイル


身の上の心配アール参上: \frac{ 4 }{ 3 }   \pi r ^{ 3 }


例1:インライン数式

文章に埋め込んだ形で自然に表示される

 inlineMath: [["\\(","\\)"] ],

の場合、\(Mathjaxのコード\) のように、前後で覆う。


身の上の心配アール参上: \(\frac{ 4 }{ 3 }   \pi r ^{ 3 }\)

表示結果

身の上の心配アール参上: \(\frac{ 4 }{ 3 }   \pi r ^{ 3 }\)


例2: ディスプレイ数式

改行されて中央よせになる

displayMath: [ ['$$','$$'], ["\\[","\\]"] ]

の場合、\[Mathjaxのコード\]$$Mathjaxのコード$$のように、前後で覆う。


身の上の心配アール参上: \[\frac{ 4 }{ 3 }   \pi r ^{ 3 }\]

表示結果

身の上の心配アール参上: \[\frac{ 4 }{ 3 }   \pi r ^{ 3 }\]


その他、AMSmathやマクロ、タイポなど、色々あるのだが、とりあえず上の二つ知ってれば、さほど困ることはない。


最後に


いつも私が参考にさせていただいているコード表です。

http://if1.tech/g-mathjax

めちゃくちゃ便利。

唯一の問題はアプー!がめちゃくちゃ邪魔なこと。