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>

設定関係(MathJaxオブジェクト)

JavaScriptでMathjaxオブジェクトの情報を記述をすると、色々と設定できる。
MathJaxオブジェクトの中に以下のようなオブジェクトが含まれている。

chtml
　数式の配置、文字の大きさなど
options
　HTMLの処理について
tex
パッケージの読み込み、数式の開始/終了
loader
startup
svg

見た目の調整(邪道)

MathJaxの設定とhtml要素へのCSSで調整するのが正攻法だが、上手くいかないこともある
（知識不足なだけかも）
そんなときは、次の手順で強引に調整できる場合がある。

ブラウザの開発者ツールを開く
該当の数式のタグ構造を確かめる（MathJax独自の要素が生成されるっぽい）
該当箇所にCSSを設定する

例

上のサンプルにある【\textコマンドの調整】の部分。
「\textコマンドの中身はscaleの設定に従って拡大されるが、地の文と大きさを合わせたい」
正当な解決法が分からないので試してみたら、何とかなった感じ。

予期しない動きをする可能性があるので考慮すること

画像を取得(svg)

svgで出力すれば、数式を画像として出力・加工できる（需要ある？）。
svgを出力したいときは、ロード時にsvg用のJavaScriptファイルを読み込む。
出力できたら

ブラウザの開発者ツールを開いて、該当箇所をコピー。
テキストとして保存（拡張子はsvg）。
画像編集ソフトで開けば加工できる（グループ化されているので注意）。
あとは縁取り、グラデーション、透過png出力など好きなように使う。

動的読み込み

動的に追加した要素に対して、数式があれば探して描画するメソッド。
引数は評価したい要素のリスト

引数を省略した場合は、追加された要素すべてを探索、評価済みの既存の要素はそのまま。

      MathJax.typeset([elm1,elm2,...])

おわり

投稿日：2024年5月5日

この記事を高評価した人

高評価したユーザはいません

この記事に送られたバッジ

バッジはありません。

バッチを贈って投稿者を応援しよう

バッチを贈ると投稿者に現金やAmazonのギフトカードが還元されます。

投稿者

tanu

18464

他の人のコメント

コメントはありません。

読み込み中

tanu

MathMax入門

はじめに
導入
設定関係(MathJaxオブジェクト)
見た目の調整(邪道)
画像を取得(svg)
動的読み込み
おわり