MathJax version 3 について調べたこと。
追記する予定。
MathJaxとは
ブラウザーで数式を表示するJavaScriptライブラリ。
HTMLで表現できない数式をSVGで表示する。
使い方
HTMLファイルに次のタグを追加する。
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
表記法
Tex/LaTeX表記、MathML表記、AsciiMath表記を使用できる。
文中に数式を埋め込むインライン方式では、\$\$…\$\$のように、\$と\$で数式を囲む。
他の行から分離して数式を表示するときは、\[…\]のように、\[と\]で数式を囲む。
デフォルトでは、\$…\$のインライン方式は使用できない。
TeX/LaTeX数式をJavaScriptの文字列で使用する時、JavaScriptが\を特殊と文字として扱うため、エスケープが必要になる。
var math = '\\frac{1}{\\sqrt{x^2 + 1}}';
設定
MathJaxのファイルを読み込む前に、グローバル変数MathJaxに設定を登録する。
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
}
};
</script>
<script id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
</script>
複数ページで同じ設定を使用している場合は、設定をファイルに保存すると便利。
// mathjax-cofig.js
window.MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
}
};
読み込み処理
<script src="mathjax-config.js" defer></script>
<script type="text/javascript" id="MathJax-script" defer
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
</script>
MathJax設定ファイルでMathJaxをロードする方法。
// load-mathjax.js
window.MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
},
};
(function () {
var script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js';
script.async = true;
document.head.appendChild(script);
})();
読み込み処理
<script src="load-mathjax.js" async></script>
コンポーネントの読み込み
ロードするコンポーネントをloaderセクションで配列で設定し、スタートアップコンポーネントをロードする。
MathJax = {
loader: {
load: ['input/tex-base', 'output/svg', 'ui/menu', '[tex]/require']
},
tex: {
packages: ['base', 'require']
}
};
</script>
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3.0.0/es5/startup.js">
</script>
起動時の処理
MathJax起動プロセスにフックして、追加の設定や処理を実行することができる。
ready()関数は、MathJaxがすべてのコンポーネントがロードされたときにMathJaxが読み出す関数。
オーバーライドして、初期化の前後に処理を実行したりできる。
pageReady()関数は、MathJaxの準備が整い、ページ自体の準備ができているときに実行される。
window.MathJax = {
startup: {
ready: () => {
console.log('MathJax is loaded, but not yet initialized');
MathJax.startup.defaultReady();
console.log('MathJax is initialized, and the initial typeset is queued');
}
}
};
MathJaxの最初の組版が終わったあとに実行する
window.MathJax = {
startup: {
ready: () => {
MathJax.startup.defaultReady();
MathJax.startup.promise.then(() => {
console.log('MathJax initial typesetting complete');
});
}
}
};
動的な処理
MathJaxが読み込まれると、Webページの数式を処理する。
MathJaxが処理を実行したあとに、Webページに数式を追加してもMathJaxは自動的に処理しない。
ページに挿入された数式がある場合は、MathJaxに組版を指示する必要がある。
その方法には、MathJax.typeset()とMathJax.typesetPromise()がある。
MathJax.typeset()は組版を同期的に行う。呼び出しが終了すると組版は完了する。
MathJax.typesetPromise()は組版を非同期に行う。組版が完了すると解決されるPromiseを返す。
どちらの関数もオプションの引数を受け取る。
引数は、コンテンツを処理するDOM要素・CSSセレクタ文字列。
引数を指定すると、組版はそれらの要素に制限される。
typeset(() => {
const math = document.querySelector('#math');
math.innerHTML = '$$\\frac{a}{1-a^2}$$';
return math;
});
自動採番の初期化
TeXは方程式に自動的に番号をつけることができる。
ページを変更すると、番号のついた方程式が追加・削除され、問題を引き起こす可能性がある。
次の関数で、方程式の番号をリセットできる。
MathJax.texReset([start])
数式の削除
数式を削除するときは、MathJaxに通知する必要がある。
MathJax.typesetClear()メソッドを使用する。
引数無しで呼び出した場合、MathJaxはすべての数式を忘れる。
ページから一部の数式を削除する場合、MathJax.typesetClear()の引数に要素の配列を渡す。
const node = document.getElementById('has-math');
MathJax.typesetClear([node]);
数式の文字列の変換
数式を含む文字列を別の形式に変換する。
MathJaxをロードするとロードした入力形式から出力形式に変換するメソッドが作成される。
例。MathML入力とSVG出力コンポーネントをロードした場合。
MathJax.mathml2svg(math[,options])
MathJax.mathml2svgPromise(math[,options])
MathJax.mathml2mml(math[,options])
MathJax.mathml2mmlPromise(math[,options])
オプション
- display 数学が表示モードかどうかを指定するブール値(TeX入力の場合)。デフォルトはtrue。
- em フォントのemのピクセル数。デフォルトは16
- px フォントのexのピクセル数。デフォルトは8
- containerWidth コンテナーの幅(ピクセル単位)。デフォルトはex値の80倍
- lineWidth 改行幅をem単位で示す数値。デフォルトは非常に大きな数(100000)のため、実質的に改行されない。
- scale 結果の変換に適用するスケーリング係数。デフォルトは1です。
例
let html = MathJax.tex2chtml('\\sqrt{x^2+1}', {em: 12, ex: 6, display: false});
SVGスタイルシートを取得する。
MathJax.svgStylesheet();
HTMLスタイルシートを取得する。
数式を組版したあとで呼び出すこと。
MathJax.chtmlStylesheet();
スタイルシートをリセットする。
MathJax.startup.output.clearCache();
TeXサポート
TeXとの違い
MathJaxは、TeX・LaTeXのmath-modeマクロのみサポートする。
text-modeマクロはサポートしない。
例外として、\refマクロと、math-mode内にテキストを追加するいくつかのマクロをサポートする。
区切り文字
- インライン数式モード
- \(…\)
- ディスプレイモード
- \[…\]
- $$…$$
デフォルトでは、$…$をインラインの区切り文字として認識しない。
有効にするには、明示的に設定する。
window.MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
}
};
HTML特殊文字
<および>がブラウザーにHTMLタグとして解釈されないように注意する必要がある。
例えば、<と>の前後にスペースを配置する。
... when $x < y$ we have ...
\lt と \gt マクロが定義されている。
... when $x \lt y$ we have ...
TeX・LaTeX拡張
使用頻度の低いコマンドの中には、拡張機能で定義されているものがある。
例えば、\colorマクロはcolor拡張機能で実装されている。
コンテキストメニュー
ui/menuコンポーネントは、コンテキストメニューを実装する。
コンテキストメニューを無効にするには、enableMenuオプションをfalseにする。
MathJax = {
options: {
enableMenu: false,
}
}