「Mathjax 3.0」の版間の差分

2024年12月20日 (金) 20:20時点における最新版

MathJaxに戻る。

概要

MathJax is defined.

　Version3.0系に関する記事です。現在の最新バージョンは

MathJax version: 3.2.2

　です。プログラムで最新版のバージョンを表示していますので、信じてよしです。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&#038;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} $$

確率密度関数 $f (x) = \int_{- \infty}^{\infty} \frac{1}{\sqrt{2 π} σ σ} e^{- \frac{1}{2 σ^{2}} (x - μ)^{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に戻る。

@@ 1行目: / 1行目: @@
 [[MathJax]]に戻る。
+<yjavascript></script>
+<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  $Unknown environment 'xxx'$  outside math mode
+    processRefs: true,         // process  $???$  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(/#.*$/, ''))
+  }
+};
+</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>
+<script></yjavascript>
+== '''概要''' ==
+　<div id="output">Checking environment...</div>
+　Version3.0系に関する記事です。現在の最新バージョンは
+　<div id="version">Loading MathJax version...</div>
+<yjavascript></script>
+<script type="text/javascript">
+// 読み込み後にグローバルスコープのオブジェクトを調べる
+window.onload = function() {
+  const keys = Object.keys(window).sort(); // グローバル変数を列挙
+  const output = keys.includes("MathJax") ? "MathJax is defined." : "MathJax is not defined. Global keys: " + keys.join(", ");
+  document.getElementById("output").textContent = output;
+  if (typeof MathJax !== "undefined") {
+    if(MathJax.version) {
+    // MathJax のバージョンを取得して表示
+      document.getElementById("version").textContent = "MathJax version: " + MathJax.version;
+    }
+  } else {
+    console.error("MathJax is not defined or failed to load.");
+    document.getElementById("version").textContent = "MathJax failed to load.";
+  }
+};
+</script>
+<script></yjavascript>
+　です。プログラムで最新版のバージョンを表示していますので、信じてよしです。Version3.0系のフォントサポートはTexフォント一択です。Neo Eulerフォント非対応なので無理やりフォント適用するくらいしかできません。
-== '''概要''' ==
--04-03にmathjax2.7.4が最後に更新されたのが最後ですが、現在のVersion3と機能のほとんどは使えます。やりたいことをやろうとすると少し手順が多いというデメリットはあるものの、できないということは少ないはずです。なんといってもNeo Euler ネオオイラーフォントが使えるのはありがたいですよね。オイラーフォントはHermann Zapf(ハーマン ザフ)さんが使ったもので AMS Euler > Neo Eulerのように更新されています。AMS Eulerはもう入手困難です。とはいってもmathjaxではWebフォントを使いますので、選べません。Neo Euler一択です。
 == '''利用設定(基本的な部分)''' ==
 　数式システムを利用するにはヘッダ部で以下のような宣言をするだけです。
-　このサイトではVersion2.7.4 と 3.0.4を使い分けていて、2.7の場合は以下のような設定を使っています。
+　このサイトではVersion2.7系 と 3.0系を使い分けていて、3.0系の場合は以下のような設定を使っています。
 <span style="color: #ffffff; background-color: #555555; padding: 0px 5px 0px 5px; display: inline-block;">javascript(全ブラウザ共通)</span>
@@ 46行目: / 105行目: @@
 <span style="position: absolute; top: -28px; left: -3px; padding: 0 10px; height: 26px; font-weight: bold; color: white; background-color: #999999; border: solid 1px #999999; border-radius: 5px 5px 0 0;">
 確率密度関数</span>
-<ytmath> $f (x) = \int_{- \infty}^{\infty} \frac{1}{\sqrt{2 π} σ σ} e^{- \frac{1}{2 σ^{2}} (x - μ)^{2}}$ </ytmath>
+ $f (x) = \int_{- \infty}^{\infty} \frac{1}{\sqrt{2 π} σ σ} e^{- \frac{1}{2 σ^{2}} (x - μ)^{2}}$
 </div>
+== '''Neo Eulerフォントの利用''' ==
+１．まずNeo EulerのWebfontを入手します。[https://font.download/font/neo-euler https://font.download/font/neo-euler]の@Download @Font Face Kitの方をダウンロードします。
+２．解凍したファイル群の中のEuler.woffファイルを自分のWebサーバにアップロードします。
+３．数式を使うページのCSSにに以下のコードを埋め込みます。
+<syntaxhighlight lang="css">
+@font-face {
+    font-family: 'Neo Euler Medium';
+    src: url('./font/euler.woff') format('woff');
+}
+</syntaxhighlight>
+./font/euler.woffの部分は、自分のサイトにおける、数式を使うページからeuler.woffファイルへの相対アドレスか絶対アドレスを入力します。
+４．数式を使うページの最初の宣言とコンフィグを以下のように設定します。
+<syntaxhighlight lang="html">
+<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  $Unknown environment 'xxx'$  outside math mode
+    processRefs: true,         // process  $???$  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>
+</syntaxhighlight>
+とすると無理やりな状態でNeo Eulerフォントが適用できます。あたりまえだけど公式で非対応と宣言されているとおりなので、無理矢理では、わりかしズレる。けどそれなりにEulerフォントが使える。特に積分がひどくずれる。フォントに合わせた数値の微調整って死ぬほど大変なんだな。いろいろなフォントに対応しているVersion2.7.7が優秀過ぎる。Version3.xへぼい。いつまでも見た目に拘れない状態が続いている。見た目に拘るためのMathjaxなのにね。拘れない。惜しい。サンプル提示はまた今度。
+[[Mathjax3.x系 Neo Eulerフォントのサンプルページ]]
 [[MathJax]]に戻る。