Mathjax 3.0
MathJaxに戻る。
概要
Version3.0系に関する記事です。現在の最新バージョンは
です。プログラムで最新版のバージョンを表示していますので、信じてよしです。Version3.0系のフォントサポートはTexフォント一択です。Neo Eulerフォント非対応なので無理やりフォント適用するくらいしかできません。
利用設定(基本的な部分)
数式システムを利用するにはヘッダ部で以下のような宣言をするだけです。
このサイトではVersion2.7系 と 3.0系を使い分けていて、3.0系の場合は以下のような設定を使っています。
javascript(全ブラウザ共通)
<script type='text/x-mathjax-config'>
MathJax.Hub.Config({
"tex2jax" :{
inlineMath :[["$","$"]],
processEscapes : true
},
"TeX" : {
extentions :["color.js", "cancel.js"],
},
"HTML-CSS": {
availableFonts :[],
webFont :"Neo-Euler",
}
});
</script>
<script type='text/javascript' src='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML%2CSafe.js&ver=3.8'>
</script>
Extensionについては、複数を使う時、公式ページでは上記のように記述しろとなっているのだけれど、2つめ以降がうまく取り込まれないみたい。なので、面倒だけどページごとに $ \require{cancel} $ と、エクステンションの機能を使う直前に記述して対応します。なんすかね。これ。でもそのページで一回、記述すれば、それ以降はずっとそのページでExtensionが適用されるみたいなので、よしとします。
使用例 $ \require{cancel} $
mathjax
$ \require{cancel} $
$$ f(x)= \int^{\infty}_{-\infty}\color{red}{\frac{1}{\sqrt{2\pi}\sigma \cancel{\sigma} }}e^{-\frac{1}{2\sigma^2}(x-\mu)^2} $$
確率密度関数
Neo Eulerフォントの利用
１．まずNeo EulerのWebfontを入手します。https://font.download/font/neo-eulerの@Download @Font Face Kitの方をダウンロードします。
２．解凍したファイル群の中のEuler.woffファイルを自分のWebサーバにアップロードします。
３．数式を使うページのCSSにに以下のコードを埋め込みます。
@font-face {
font-family: 'Neo Euler Medium';
src: url('./font/euler.woff') format('woff');
}
./font/euler.woffの部分は、自分のサイトにおける、数式を使うページからeuler.woffファイルへの相対アドレスか絶対アドレスを入力します。
４．数式を使うページの最初の宣言とコンフィグを以下のように設定します。
<script type='text/x-mathjax-config'>
MathJax = {
tex: {
packages: ['base'], // extensions to use
inlineMath: [ // start/end delimiter pairs for in-line math
['\\(', '\\)'],
['\\@', '\\@']
],
displayMath: [ // start/end delimiter pairs for display math
['$$', '$$'],
['\\[', '\\]']
],
processEscapes: true, // use \$ to produce a literal dollar sign
processEnvironments: true, // process \begin{xxx}...\end{xxx} outside math mode
processRefs: true, // process \ref{...} outside of math mode
digits: /^(?:[0-9]+(?:\{,\}[0-9]{3})*(?:\.[0-9]*)?|\.[0-9]+)/,
// pattern for recognizing numbers
tags: 'none', // or 'ams' or 'all'
tagSide: 'right', // side for \tag macros
tagIndent: '0.8em', // amount to indent tags
useLabelIds: true, // use label name rather than tag for ids
multlineWidth: '85%', // width of multline environment
maxMacros: 1000, // maximum number of macro substitutions per expression
maxBuffer: 5 * 1024, // maximum size for the internal TeX string (5K)
baseURL: // URL for use with links to tags (when there is a <base> tag in effect)
(document.getElementsByTagName('base').length === 0) ?
'' : String(document.location).replace(/#.*$/, ''))
}
"HTML-CSS": {
availableFonts :['Neo Euler Medium'],
preferredFont: null,
webFont :'Neo Euler Medium'
}
};
</script>
<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>
<style>
mjx-container mjx-utext { font-family: 'Neo Euler Medium', Meiryo !important; }
mjx-container svg text { font-family: 'Neo Euler Medium', Meiryo !important; }
mjx-container[display="true"] { margin: 0 !important; padding: 2px 0 4px 0 !important; }
mjx-mid mjx-c::before { padding-top: 0.13em !important; }
mjx-container *:not(mjx-utext) {
font-family: "Neo Euler Medium" !important;
}
</style>
とすると無理やりな状態でNeo Eulerフォントが適用できます。あたりまえだけど公式で非対応と宣言されているとおりなので、無理矢理では、わりかしズレる。けどそれなりにEulerフォントが使える。特に積分がひどくずれる。フォントに合わせた数値の微調整って死ぬほど大変なんだな。いろいろなフォントに対応しているVersion2.7.7が優秀過ぎる。Version3.xへぼい。いつまでも見た目に拘れない状態が続いている。見た目に拘るためのMathjaxなのにね。拘れない。惜しい。サンプル提示はまた今度。
Mathjax3.x系 Neo Eulerフォントのサンプルページ
MathJaxに戻る。