「Mathjax2.x 設定」の版間の差分

2025年1月24日 (金) 02:52時点における最新版

概要

　Mathjaxを使う前の設定ってなんかいろいろあってややこしい。管理人レベルの人なら、そう感じるでしょう。2.x系と3.x系の情報が錯綜していること、英語の情報が多い、検索にあまりひっかからないし、本家の説明書も何を言っているのか理解できない。もっと具体的に説明してくれたらいいのに。

　どうやって最強の設定を見つければいいのか。わからない。

　ちなみにCDN(Content Delivery Network)もどれを使えばいいのか。一長一短あったりしてよくわからない。

CDN URIについて

　自分のサイトにMathjaxをダウンロードしてきて、設定する方法ではなく、公開されているMathjaxを使うときにはいくつかのアドレスが選択できます。いろいろあるっていうのだけで、ややこしい。しかも、全部なんかちょっと仕組みが違うっぽい

　最新版に拘りたい人は以下の設定かな。@2で、2.x系の最新版が使えます。現時点では、2.7.9でした。でも、あとで説明する最強設定は使えません。

<script type="text/x-mathjax-config">
ここに設定を記述しますが、省略。
</script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js?config=TeX-AMS_HTML-full"></script>

　同じ最新版でも2.7.1になる以下の残念なCDNもあります。何がlatestやねん。

<script type="text/x-mathjax-config">
ここに設定を記述しますが、省略。
</script>
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML-full"></script>

　以下のようにバージョンを指定することもできます。

<script type="text/x-mathjax-config">
ここに設定を記述しますが、省略。
</script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/mathjax@2.7.7/MathJax.js?config=TeX-AMS_HTML-full"></script>

　3.x系にはこういうのもあるっていう。https://cdn.jsdelivr.net/npm/mathjax@3/es5/MathJax.js?config=TeX-AMS_HTML-fullけど2.x系はない。

　でも管理人は以下のようなバージョン固定の設定を使う。これは拡張機能の最強設定ができるから。ただしバージョン2.7.1のような古いバージョンではWebフォント設定はできません。それと@2やlatest指定で最新版を使うこともできません。

<script type="text/x-mathjax-config">
ここに設定を記述しますが、省略。
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/MathJax.js?config=TeX-AMS_HTML-full"></script>

　因みに最強設定ってほんとに最強かは、定かではないです。まとめると、管理人はcdnjs.cloudflare.comを使っていて、その他にcdn.jsdelivr.netやcdn.mathjax.orgもあるよって感じの印象。なぜこのように複数のCDNがあって、どういうふうに管理されているかはわからない。本家Mathjaxドキュメントでも言及はしてくれない。2017年4月30日に本家が独自CDNの提供をやめたとかってChatGPTは言ってました。あ、ドキュメントをよく読んでみるとcdnjs.cloudflare.comが推奨で最新バージョンを使うには以下のようにしていするといいって書いてますね。あらゆるバージョン指定をしていてもMathJax.jsではなくlatest.jsにすると最新版になるらしい。なかなかいかつい仕様だな。管理人はある日突然、表示内容が変わるのは好きではないので、2.7.9と指定することにします。

<script type="text/x-mathjax-config">
ここに設定を記述しますが、省略。
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/latest.js?config=TeX-AMS_HTML-full"></script>

　使っているMathJaxのバージョンのチェック方法はMathJax バージョンチェックの記事に記載しています。

MathJax.js?config=

　どのCDNを使っても、独自のMathjaxを使うにしても、出力エンジンや形式はこのようなURI引数config=を使って指定します。これがまたいっぱい選択肢がある。いっちゃんいいのをひとつかふたつにしてほしいよね。まぁとりあえず、いろいろな引数について知ることにしましょう。すべてはhttps://docs.mathjax.org/en/v2.7-latest/に書かれていると思うのだけど、ちょっと読み解こう。

　ここにかける設定ファイル名はhttps://docs.mathjax.org/en/v2.7-latest/config-files.html#common-configurationsに全ての設定ファイルについて記載があります。出力の形式とか入力の形式とか複雑な初期設定をお勧めの設定にしてくれるのが設定ファイルです。管理人のサイトではTeX-AMS_HTML-fullというのを使っています。これはTeX-AMS_HTML設定ファイルに-fullオプションを付けたものとして処理されていると説明書のページでは書かれています。TeXでTeX形式で数式を書いて、AMSでユーザが表示形式を選択できて、HTMLでCSSとHTMLで出力するという方式です。管理人がなぜCSSとHTML形式を選択しているかというと、表示が乱れたときに、Edgeブラウザの開発者ツールで、出力されたCSSとHTMLの形式であれば、CSSの設定値を変更したり、CSSの設定値を追加したり、HTMLのテキスト値を変更したりすることで、調整し、調整したタグをコピーして貼り付ければ、ユーザによる数式上の右クリックメニューでの表示調整はできなくなりますが、出力処理済みのタグをそのまま埋め込むだけで数式が表示されるようになるからです。出力済みのタグを埋め込むのは面倒な作業ですが、数式の変更を必要としない確定した状態であれば、変更はもう簡単にはできないというトレードオフと引き換えにユーザが表示待ちをしなくて済むという利点もあります。CSSとHTMLだけであらゆる数式表示は実現できていると思います。ここぞというところで使える技ですね。commonHTMLだと表示が10秒以内で終わるという利点があるそうです。EdgeとInternetExplorerを捨ててしまえば描画は早くなるのが管理人の印象。表示遅くても、デフォで入ってたEdge使いますけど。同じようなモノ複数インストールするのもヤダし。commonHTMLにすると最新ブラウザなら10秒ってほんとかな。Edgeは最新ブラウザだけど、そうは思わなかったけどな、コード一覧とかのページの表示はめちゃおそです。ある意味ブラウザクラッシャーだよね。管理人自身でもめったなことがなければ、コード一覧とかは、クリックしないようにしています。どういう環境でテストしたんだろうMathJaxの中の人。ともかくcommonHTMLを使うときはTeX-AMS_CHTML-fullという設定にするといいですね。そのかわりCSSを使ったフォント設定は無効になります。MathJaxドキュメントによると以下の設定ファイルが用意されています。

TeX-MML-AM_CHTML

TeX-MML-AM_HTMLorMML

TeX-MML-AM_SVG

TeX-AMS-MML_HTMLorMML

TeX-AMS_CHTML

TeX-AMS_SVG

TeX-AMS_HTML

TeX-AMS-MML_SVG

MML_CHTML

MML_SVG

MML_HTMLorMML

AM_CHTML

AM_SVG

AM_HTMLorMML

　という組み見合わせについては設定ファイルが準備されています。設定ファイル名のアンダーバーの手前が入力形式。アンダーバーの後ろが出力形式になっています。つまり、入力にTeX、MML(MathML)、AM(AsciiMath)、AMS(AMSmath、AMSsymbol)が使えて、出力にCHTML(commonHTML)、HTML(CSS+HTML)、SVG、MML(MathML)が使えて、その組合せがいくつか設定ファイルになっているということです。設定ファイルごとの詳細な設定方法も公開されているので、存在しない組合せの設定を使いたい場合は、詳細な設定を再利用して、自分好みの入出力設定にもできるということです。それぞれの設定ファイルには-fullありとなしがあります。管理人はTeXが使えてHTML+CSS出力してくれれば十分なので、Tex-AMS_HTML-fullですね。AMSはどうでもいいけど、設定ファイルがないし、それほど邪魔でもないし。ということだったとさ。

　標準バージョンは、一部の出力プロセッサを定義するだけですただし、出力を実装するコードは読み込まれません。

　フルバージョンでは、完全な出力プロセッサがロードされるため、 MathJax がページに必要とするすべてのものは、前もって読み込まれるべきです。

　とのことです。

設定

　結局、以下の設定が今の最適な設定かなと思うに至りました。最強？最強ってあの？最強？それって最弱なんじゃ…

　ただし、以下の設定をペロッとしただけではダメです。

<script type="text/x-mathjax-config">
  MathJax.Ajax.config.path["Contrib"]="https://(あなたのドメインorURI)/mathjax/";
  MathJax.Hub.Register.StartupHook("TeX Jax Ready",function (){
    MathJax.Hub.Insert(
      MathJax.InputJax.TeX.Definitions.macros,{
        cancel: ["Extension","cancel"], 
        bcancel: ["Extension","cancel"], 
        xcancel: ["Extension","cancel"], 
        cancelto: ["Extension","cancel"]
      }
    );
  }); 
  MathJax.Hub.Config(
    {
      tex2jax:{
        inlineMath: [['\\@','\\@'],['\\(','\\)']],
        processEscapes: true
      },
      TeX:{
        //equationNumbers:{autoNumber: "AMS"}, 
        extensions: ["[Contrib]/physics/physics.js","[Contrib]/siunitx/siunitx.js"]
      },
      "HTML-CSS": {
        availableFonts: [],
        preferredFont: null,
        webFont: "Neo-Euler"
      },
    }
  );</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/latest.js?config=TeX-AMS_HTML-full"></script>

　Mathjaxの拡張機能がありまして、主にphysicsというマクロ拡張です。Version3.0では、require{physics}とするだけで使えるものですが、2.x系ではなんかガチャガチャしなくちゃいけなくてそれが二行目付近の設定です。

　https://github.com/ickc/MathJax-third-party-extensionsから一式をダウンロードして、自分のサイトのルートにmathjaxというフォルダを作ってその中に置いた場合は2行目のような設定になります。パスに詳しい人は、この記事を読み解いて自分で好きなところに配置して下さい。MathJax.Ajax.config.path["Contrib"]っていうのが、そのパスを覚えてくれる設定が2行目です。[Contrib]というスペシャルなパスがExtensionの項目に記載するときに21行目のように使えるようになります。なるほど、そうやって使うのか。と、理解した当時は感動したものです。

　上記のような作業をするとペロッと貼るだけでphysics拡張が使えるようになります。しかし残念ながら2.x系でphysicsを導入すると、一般市民が一番よく使う割り算の記号 \( \divisionsymbol \) があまりつかわない記号 \( \divs \) になってしまうので、physics拡張の中つまり、[Contrib]/physics/physics.jsからdiv:["Macro","{\\grad\\vdot}"],という部分を消した方がいいかもしれない。使いやすくなる。physics拡張の中には\\grad\\vdotをえがくためのコマンドとしてdivergenceというものが定義されている。ひょっとして、physics拡張の中でdivまで定義してしまったのは間違いなんじゃないかなと思ったりもする。\divergenceがあれば十分だと思うし、発散の記号なんてあんまし使わないよ。もともとの\divのほうがよっぽど役に立つ。偉い人の考えることはよくわかんね。一般市民をビビらせたいだけの嫌がらせにしか思えない。

　3行目から12行目はcancel関係のマクロを定義しています。他にも読み込んで使える機能が沢山あります。便利なものがあれば発見次第、報告したいと思います。2.x系 3.x系に引けを取らない相当な描画ができるし、まだまだ2.x系使おうかなと思わされますね。

　23行目から26行目は極力Neo Eulerフォントを使うためと\textとかで日本語の引数を設定した場合にMeiryoのようなやや美しい日本語フォントが埋め込まれるように指定しています。このサイトではHTML+CSSで出力していますので、日本語にやや美しいフォントが使われるわけです。良かったね。数学ガールの真似をしたい人はMeiryoフォントじゃなくて、ヒラギノ明朝だね。管理人は所有していません。どうせMacOSかなんか使ってるんでしょ。所詮は無料のフォントよのう。ふふふ。やっぱね変態はWindowsで有料のヒラギノゴシック。これ最強。フォントちょっと大きめで使えば、Edgeでも美しいヒラギノが楽しめる。やっぱお金はそういうところにバシッと使わないとね。無料フォントで書籍を書いて小遣い稼ぎとか羨まし過ぎるだろ結城さん。ふふふ。管理人みたいに沼にハマるだけの人生カッコいいでしょ。ハマりすぎて抜け出せそうで抜け出せない。ふふふ。見習うべきところは見習わないとな。急浮上して大気圏の外から銀河をいくつもまたいでひとっとびするぜ！見ものだな。ふふふ。

　20行目は論文タイプの数式みたく、式番号を自動発番していくときにつかうよろし。\begin{align}～\end{align}とかで改行\\するだけで右端に式番号が付きます。HTMLでどうでもいい数式書いてるときにはまったくもってうっとおしいだけなので、コメント化がデフォです。論文タイプの文書を書く崇高な出来事の時用にコメント化で残してます。

　というわけで設定についての記事でした。

Mathjax 2.7へ戻る。

@@ 1行目: / 1行目: @@
 <freescript></script>
+<script type="text/x-mathjax-config">
+  MathJax.Ajax.config.path["Contrib"]="https://wiki.yo-net.jp/mathjax/";
+  MathJax.Hub.Register.StartupHook("TeX Jax Ready",function (){
+    MathJax.Hub.Insert(
+      MathJax.InputJax.TeX.Definitions.macros,{
+        cancel: ["Extension","cancel"],
+        bcancel: ["Extension","cancel"],
+        xcancel: ["Extension","cancel"],
+        cancelto: ["Extension","cancel"]
+      }
+    );
+  });
+  MathJax.Hub.Config(
+    {
+      tex2jax:{
+        inlineMath: [['\\@','\\@'],['\\(','\\)']],
+        processEscapes: true,
+        skipTags: ["notcode", "code"],
+      },
+      TeX:{
+        equationNumbers:{autoNumber: "AMS"},
+        extensions: ["[Contrib]/physics/physics.js","[Contrib]/siunitx/siunitx.js"]
+      },
+      "HTML-CSS": {
+        undefinedFamily: "'Neo Euler Medium', Meiryo, STIXGeneral, 'Arial Unicode MS', serif",
+        webFont :"Neo Euler Medium"
+      }
+    }
+  );</script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/latest.js?config=TeX-AMS_HTML-full"></script>
+<script></freescript><freescript></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/vs2015.css">
 <link rel="stylesheet" href="https://wiki.yo-net.jp/custom.css">
@@ 5行目: / 36行目: @@
 <script src="https://wiki.yo-net.jp/custom.js"></script>
 <script></freescript>
+[[Mathjax 2.7]]へ戻る。
+[[Mathjax2.x 練習場]]へ
+<!--<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML-full"></script>-->
-[[Mathjax 2.7]]へ戻る。
 == '''概要''' ==
 　Mathjaxを使う前の設定ってなんかいろいろあってややこしい。管理人レベルの人なら、そう感じるでしょう。2.x系と3.x系の情報が錯綜していること、英語の情報が多い、検索にあまりひっかからないし、本家の説明書も何を言っているのか理解できない。もっと具体的に説明してくれたらいいのに。
@@ 29行目: / 63行目: @@
 ここに設定を記述しますが、省略。
 </script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js?config=TeX-AMS_HTML-full"></script></code></pre><div>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js?config=TeX-AMS_HTML-full"></script></code></pre></div>
 <script></freescript>
@@ 40行目: / 74行目: @@
 ここに設定を記述しますが、省略。
 </script>
-<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML-full"></script></code></pre><div>
+<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML-full"></script></code></pre></div>
 <script></freescript>
@@ 51行目: / 85行目: @@
 ここに設定を記述しますが、省略。
 </script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/mathjax@2.7.7/MathJax.js?config=TeX-AMS_HTML-full"></script></code></pre><div>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/mathjax@2.7.7/MathJax.js?config=TeX-AMS_HTML-full"></script></code></pre></div>
 <script></freescript>
@@ 66行目: / 100行目: @@
 ここに設定を記述しますが、省略。
 </script>
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/MathJax.js?config=TeX-AMS_HTML-full"></script></code></pre><div>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/MathJax.js?config=TeX-AMS_HTML-full"></script></code></pre></div>
 <script></freescript>
@@ 77行目: / 111行目: @@
 ここに設定を記述しますが、省略。
 </script>
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/latest.js?config=TeX-AMS_HTML-full"></script></code></pre><div>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/latest.js?config=TeX-AMS_HTML-full"></script></code></pre></div>
 <script></freescript>
@@ 133行目: / 167行目: @@
 === '''設定''' ===
@@ 140行目: / 176行目: @@
 <freescript></script>
-<div class="hljs-wrap"><pre data-label="Mathjax(管理人も使うCDNの最新).html" class="pre-wrap">
+<div class="hljs-wrap"><pre data-label="Mathjax最強設定.html" class="pre-wrap">
 <code class="language-html"><script type="text/x-mathjax-config">
    MathJax.Ajax.config.path["Contrib"]="https://(あなたのドメインorURI)/mathjax/";
@@ 164行目: / 200行目: @@
        },
        "HTML-CSS": {
-         undefinedFamily: "'Neo Euler Medium', Meiryo, STIXGeneral, 'Arial Unicode MS', serif",
+         availableFonts: [],
-         webFont :"Neo Euler Medium"
+        preferredFont: null,
-       }
+         webFont: "Neo-Euler"
+       },
      }
    );</script>
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/latest.js?config=TeX-AMS_HTML-full"></script></code></pre><div>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/latest.js?config=TeX-AMS_HTML-full"></script></code></pre></div>
 <script></freescript>
+　Mathjaxの拡張機能がありまして、主にphysicsというマクロ拡張です。Version3.0では、require{physics}とするだけで使えるものですが、2.x系ではなんかガチャガチャしなくちゃいけなくてそれが二行目付近の設定です。
+　[https://github.com/ickc/MathJax-third-party-extensions https://github.com/ickc/MathJax-third-party-extensions]から一式をダウンロードして、自分のサイトのルートにmathjaxというフォルダを作ってその中に置いた場合は2行目のような設定になります。パスに詳しい人は、この記事を読み解いて自分で好きなところに配置して下さい。MathJax.Ajax.config.path["Contrib"]っていうのが、そのパスを覚えてくれる設定が2行目です。[Contrib]というスペシャルなパスがExtensionの項目に記載するときに21行目のように使えるようになります。なるほど、そうやって使うのか。と、理解した当時は感動したものです。
+　上記のような作業をするとペロッと貼るだけでphysics拡張が使えるようになります。しかし残念ながら2.x系でphysicsを導入すると、一般市民が一番よく使う割り算の記号 <freescript></script> \( \divisionsymbol \) <script></freescript> があまりつかわない記号 <freescript></script> \( \divs \) <script></freescript> になってしまうので、physics拡張の中つまり、[Contrib]/physics/physics.jsからdiv:["Macro","{\\grad\\vdot}"],という部分を消した方がいいかもしれない。使いやすくなる。physics拡張の中には\\grad\\vdotをえがくためのコマンドとしてdivergenceというものが定義されている。ひょっとして、physics拡張の中でdivまで定義してしまったのは間違いなんじゃないかなと思ったりもする。\divergenceがあれば十分だと思うし、発散の記号なんてあんまし使わないよ。もともとの\divのほうがよっぽど役に立つ。偉い人の考えることはよくわかんね。一般市民をビビらせたいだけの嫌がらせにしか思えない。
+行目から12行目はcancel関係のマクロを定義しています。他にも読み込んで使える機能が沢山あります。便利なものがあれば発見次第、報告したいと思います。2.x系 3.x系に引けを取らない相当な描画ができるし、まだまだ2.x系使おうかなと思わされますね。
+行目から26行目は極力Neo Eulerフォントを使うためと\textとかで日本語の引数を設定した場合にMeiryoのようなやや美しい日本語フォントが埋め込まれるように指定しています。このサイトではHTML+CSSで出力していますので、日本語にやや美しいフォントが使われるわけです。良かったね。数学ガールの真似をしたい人はMeiryoフォントじゃなくて、ヒラギノ明朝だね。管理人は所有していません。どうせMacOSかなんか使ってるんでしょ。所詮は無料のフォントよのう。ふふふ。やっぱね変態はWindowsで有料のヒラギノゴシック。これ最強。フォントちょっと大きめで使えば、Edgeでも美しいヒラギノが楽しめる。やっぱお金はそういうところにバシッと使わないとね。無料フォントで書籍を書いて小遣い稼ぎとか羨まし過ぎるだろ結城さん。ふふふ。管理人みたいに沼にハマるだけの人生カッコいいでしょ。ハマりすぎて抜け出せそうで抜け出せない。ふふふ。見習うべきところは見習わないとな。急浮上して大気圏の外から銀河をいくつもまたいでひとっとびするぜ！見ものだな。ふふふ。
+行目は論文タイプの数式みたく、式番号を自動発番していくときにつかうよろし。<code style="padding:0 !important; border: 0 !important; background: none; font-family: 'ヒラギノ角ゴ Pro', 'ヒラギノ角ゴ ProN', 'ヒラギノ角ゴ StdN', 'ヒラギノ角ゴ StdN', 'ヒラギノ角ゴ ProN W3', HiraKakuProN-W3, メイリオ, Meiryo, 游ゴシック, 'Yu Gothic', Verdana, Helvetica, Arial, sans-serif !important;">\begin{align}～\end{align}</code>とかで改行\\するだけで右端に式番号が付きます。HTMLでどうでもいい数式書いてるときにはまったくもってうっとおしいだけなので、コメント化がデフォです。論文タイプの文書を書く崇高な出来事の時用にコメント化で残してます。
+　というわけで設定についての記事でした。
 [[Mathjax 2.7]]へ戻る。