「Mathjax2.x 練習場」の版間の差分

提供：yonewiki
編集の要約なし
編集の要約なし
40行目: 40行目:
<!--<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML-full"></script>-->
<!--<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML-full"></script>-->


== '''概要''' ==
　Mathjaxを使う前の設定ってなんかいろいろあってややこしい。管理人レベルの人なら、そう感じるでしょう。2.x系と3.x系の情報が錯綜していること、英語の情報が多い、検索にあまりひっかからないし、本家の説明書も何を言っているのか理解できない。もっと具体的に説明してくれたらいいのに。
　どうやって最強の設定を見つければいいのか。わからない。
　ちなみにCDN(Content Delivery Network)もどれを使えばいいのか。一長一短あったりしてよくわからない。
　
=== '''CDN URIについて''' ===
　自分のサイトにMathjaxをダウンロードしてきて、設定する方法ではなく、公開されているMathjaxを使うときにはいくつかのアドレスが選択できます。いろいろあるっていうのだけで、ややこしい。しかも、全部なんかちょっと仕組みが違うっぽい




74行目: 61行目:
</script>
</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>
　以下のようにバージョンを指定することもできます。
<freescript></script>
<div class="hljs-wrap"><pre data-label="Mathjax(指定バージョンのCDN).html" class="pre-wrap">
<code class="language-html"><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></code></pre><div>
<script></freescript>
　3.x系にはこういうのもあるっていう。<nowiki>https://cdn.jsdelivr.net/npm/mathjax@3/es5/MathJax.js?config=TeX-AMS_HTML-full</nowiki>けど2.x系はない。
　でも管理人は以下のようなバージョン固定の設定を使う。これは拡張機能の最強設定ができるから。ただしバージョン2.7.1のような古いバージョンではWebフォント設定はできません。それと@2やlatest指定で最新版を使うこともできません。
<freescript></script>
<div class="hljs-wrap"><pre data-label="Mathjax(管理人も使う指定バージョンのCDN).html" class="pre-wrap">
<code class="language-html"><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></code></pre><div>
<script></freescript>
　因みに最強設定ってほんとに最強かは、定かではないです。まとめると、管理人は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と指定することにします。
<freescript></script>
<div class="hljs-wrap"><pre data-label="Mathjax(管理人も使うCDNの最新).html" class="pre-wrap">
<code class="language-html"><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></code></pre><div>
<script></freescript>
　使っている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/]に書かれていると思うのだけど、ちょっと読み解こう。
　ここにかける設定ファイル名は[https://docs.mathjax.org/en/v2.7-latest/config-files.html#common-configurations https://docs.mathjax.org/en/v2.7-latest/config-files.html#common-configurations]に全ての設定ファイルについて記載があります。出力の形式とか入力の形式とか複雑な初期設定をお勧めの設定にしてくれるのが設定ファイルです。管理人のサイトでは[https://docs.mathjax.org/en/v2.7-latest/config-files.html#the-tex-ams-html-configuration-file 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 がページに必要とするすべてのものは、前もって読み込まれるべきです。
　とのことです。
　
=== '''設定''' ===
　結局、以下の設定が今の最適な設定かなと思うに至りました。最強？最強ってあの？最強？それって最弱なんじゃ…
　ただし、以下の設定をペロッとしただけではダメです。
<freescript></script>
<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/";
  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": {
        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></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行目のように使えるようになります。なるほど、そうやって使うのか。と、理解した当時は感動したものです。
\( \quantity{  \frac{1}{1+\frac{1}{2}} }  \)
$$ \require{physics} \flatfrac{1}{2} $$
　<div id="output">Checking environment...</div>
　<div id="version">Loading MathJax version...</div>
<freescript></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></freescript>
<script></freescript>

2025年1月9日 (木) 18:16時点における版

Mathjax 2.7へ戻る。

Mathjax2.x 設定へ


　最新版に拘りたい人は以下の設定かな。@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>

「https://wiki.yo-net.jp/index.php?title=Mathjax2.x_練習場&oldid=9856」から取得