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>
JavaScriptでMathjaxオブジェクトの情報を記述をすると、色々と設定できる。
MathJaxオブジェクトの中に以下のようなオブジェクトが含まれている。
MathJaxの設定とhtml要素へのCSSで調整するのが正攻法だが、上手くいかないこともある
（知識不足なだけかも）
そんなときは、次の手順で強引に調整できる場合がある。
上のサンプルにある【\textコマンドの調整】の部分。
「\textコマンドの中身はscaleの設定に従って拡大されるが、地の文と大きさを合わせたい」
正当な解決法が分からないので試してみたら、何とかなった感じ。
予期しない動きをする可能性があるので考慮すること
svgで出力すれば、数式を画像として出力・加工できる（需要ある？）。
svgを出力したいときは、ロード時にsvg用のJavaScriptファイルを読み込む。
出力できたら
動的に追加した要素に対して、数式があれば探して描画するメソッド。
引数は評価したい要素のリスト
引数を省略した場合は、追加された要素すべてを探索、評価済みの既存の要素はそのまま。
MathJax.typeset([elm1,elm2,...])