MathMax入門

はじめに

webサイトやローカルのhtmlファイルで数式を表示するにはMathJaxが便利。
自分用のメモを兼ねて
初見の人が手軽にMathJaxを体験するためのサンプルを提供するのが主旨です。

導入

CDN で配信されているので、scriptタグで読み込むだけで使える。
とりあえず、以下をコピペすれば手軽に試せます（htmlファイルとして保存）。

      <!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>MathJax Intro</title>
    <script>
MathJax = {
  loader:{
    load:['[tex]/unicode','[tex]/color','[custom]/xypic.js','[tex]/ams'],
    paths:{custom:'https://cdn.jsdelivr.net/gh/sonoisa/XyJax-v3@3.0.1/build'}
  },
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']],  //行内数式の「開始」,「終了」
displayMath: [ ['$$', '$$'], ['\\[', '\\]'] ], //別行立て数式の「開始」,「終了」

    packages:{
        '[+]':['unicode','color','xypic','ams']
    },
    processEscapes: true,
    tags: 'none'
  },
  chtml: {
    scale: 1.2,              //数式の文字の大きさ
    matchFontHeight: false,
    mtextInheritFont: true, //\textコマンドのフォントを周りに合わせる
    displayAlign: "left",   //別行立て数式を左寄せに
    displayIndent: "0pt"
  },
  
  svg: {
    scale: 1.2,
    matchFontHeight: false,
    mtextInheritFont: true,
    displayAlign: "left",
    displayIndent: "0pt"
  }
};
  </script>
<!--
SVG用
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-svg.js"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
-->
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-svg.js"></script>
<style type="text/css">
body{
    white-space: nowrap;
    padding-left:30px;
    padding-top:10px;
    padding-bottom:50px;
    letter-spacing: .075em;
    line-height: 1.85;
    font-size:1.2rem;
    font-family: -apple-system,BlinkMacSystemFont,Hiragino Kaku Gothic ProN,Hiragino Sans,Meiryo,sans-serif,Segoe UI Emoji;
}
/*textコマンドの設定*/
mjx-utext{
    font-size:1.2rem !important;
}
    </style>
  </head>
  <body>
    <p>$$\rho \left\{ \frac{\partial \boldsymbol{v}}{\partial t}+(\boldsymbol{v} \cdot \nabla)\boldsymbol{v} \right\}=-\nabla p +\mu \nabla^2 \boldsymbol{v}+\rho \boldsymbol{f}$$</p>
  </body>
</html>