ホーム / 【2022年12月1週】 / 【その他】 /

MathJaxの概要と導入・設定方法：Webサイトやブログでの数式表現

公開日： 更新日：

【2022年12月1週】 【その他】

この記事をシェアする
  • B!
サムネイル画像

本稿では、Webサイトやブログで数式をきれいに表示してくれるオープンソースのJavaScriptライブラリであるMathJaxの概要と導入・設定方法について紹介しています。

なお、閲覧にあたっては、以下の点にご注意ください。

  • スマートフォンやタブレット端末でご覧の際、コードが見切れている場合は、横にスクロールすることができます。
  

MathJaxとは？

MathJaxとは、端的に言えば、「Webブラウザ上で数式を表示させることのできるJavaScriptライブラリ」のことです。このページでは、主にMathJax Documentationに記載されている内容をもとに、概要や導入・設定方法などを紹介していきます。

なお、本記事内の英文は、基本的に公式サイトからの引用で、筆者の備忘録を兼ねて、以下のように筆者なりの訳文を与えています。

MathJax is an open-source JavaScript display engine for LaTeX, MathML, and AsciiMath notation that works in all modern browsers.
The core of the MathJax project is the development of its state-of-the-art, open source, JavaScript platform for display of mathematics.
MathJaxは、現在使われているすべてのWebブラウザにおいて、LaTeX、MathML、AsciiMathを表示させることのできるオープンソースのJavaScript表示エンジンです。
MathJaxプロジェクトの中核は、数学的な表現を表示させるための、最先端のオープンソースJavaScriptプラットフォームを開発することです。

なお、以下の点にご留意ください。

  • 本記事の内容は、2022年12月01日時点の情報です。
  • 一部の文章を省略していたり、別々のページに載っていた文章をひとつにまとめているところもあります。
  • 訳文は、公式なものではなく、あくまでも「筆者なりの訳文」であるため、専門用語の使い方や細かいニュアンスなどが正確ではない可能性があります。
  • その他、最新の状況や詳細については、各自、MathJax Documentationにてご確認ください。

関連団体・評価

Originally, MathJax was supported by The MathJax Consortium, a joint venture of the American Mathematical Society (AMS) and the Society for Industrial and Applied Mathematics (SIAM) to advance mathematical and scientific content on the web.
Since its initial release in 2010, MathJax has become the gold standard for mathematics on the web.
MathJaxはもともと、American Mathematical Society（アメリカ数学会）とSociety for Industrial and Applied Mathematics（産業・応用数学会）のジョイント・ベンチャーであるMathJax Consortiumの支援を受け、インターネット上での数学的・科学的コンテンツの発展のため設立されました。
2010年のリリース開始以来、Web上での数学表現の標準（ゴールド・スタンダード）となりつつあります。

そのほか、以下の団体がパートナー

The Institute of Electrical and Electronics Engineers
世界最大規模の電気・情報工学分野の学術研究団体、技術標準化機関
Elsevier
医学・科学技術関係を中心とする世界最大規模の出版社

以下の団体などが支援団体となっています。

American Physical Society
アメリカ物理学会
The Optical Society
アメリカ光学会
The London Mathematical Society
ロンドン数学会
Springer Nature
学術出版の世界企業
Oxford University Press
オックスフォード大学出版局
Wiley
科学、医学、教育などの分野の世界的な学術出版社
＊ここで挙げている支援団体は一部です。  

特徴

It requires no setup on the part of the user (no plugins to download or software to install).
ユーザー側でのセットアップ（プラグインのダウンロードやソフトウェアのインストール）を必要としません。
MathJax uses web-based fonts to produce high-quality typesetting that scales and prints at full resolution, unlike mathematics included as bitmapped images.
MathJax は、ビットマップ画像に含まれる数式とは異なり、常に最大の解像度での表示や印刷ができる高品質な植字を提供するため、Webベースのフォントを使っています。
With MathJax, mathematics is text-based rather than image-based, and so it is available for search engines, meaning that your equations can be searchable, just like the text of your pages.
MathJaxでの数学表現は、画像ベースではなく、テキストベースであるため、検索エンジンが使用可能、つまり、ユーザーのWebページにある文字と同様に、数式を検索することができます。
MathJax allows page authors to write formulas using TeX and LaTeX notation, MathML (a World Wide Web Consortium standard for representing mathematics in XML format), or AsciiMath notation. MathJax can generate output in several formats, including HTML with CSS styling, or scalable vector graphics (SVG) images.
MathJaxでは、TeX ・ LaTeX 記法、MathML （ワールドワイド・ウェブ・コンソーシアムのXMLフォーマットによる数式を表示する基準）、AsciiMath 記法による数式の記述が可能で、CSS装飾による HTML 形式やスケーラブル・ベクター・グラフィックス（SVG）画像形式などいくつかのフォーマットでの表示が可能です。
 

導入方法

Ways of Accessing MathJax
There are two ways to access MathJax for inclusion in web pages: link to a content delivery network (CDN) like cdn.jsdelivr.net to obtain a copy of MathJax, or download and install a copy of MathJax on your own server (for network access) or hard disk (for local use without a network connection).
MathJaxへのアクセス方法
WebページにMathJaxを導入する方法には、2種類の方法があります。ひとつは、cdn.jsdelivr.net のようなコンテンツデリバリネットワーク（CDN）にアクセスし、MathJaxのコピーを入手する方法、もうひとつは、自身のサーバー（ネットワークアクセス用）やハードディスク（ネットワークにアクセスしないローカル使用）にMathJaxのコピーをインストールする方法です。
Using MathJax from a Content Delivery Network (CDN) The easiest way to use MathJax is to link directly to a public installation available through a Content Distribution Network (CDN). When you use a CDN, there is no need to install MathJax yourself, and you can begin using MathJax right away. The CDN will automatically arrange for your readers to download MathJax files from a fast, nearby server.
コンテンツデリバリネットワークを用いたMathJax の使用
MathJaxを使用するための最も簡単な方法は、Content Distribution Network（CDN）に直接リンクする方法です。CDNを使用する場合、ユーザーはMathJaxをインストールする必要はなく、すぐに使い始めることができます。CDNは自動的に最も近くて速いサーバーから、MathJaxファイルをダウンロードします。

導入手順

To jump start using jsdelivr, you accomplish the first two steps by putting * into the <head> block of your document. (It can also go in the <body> if necessary, but the head is to be preferred.) This will load the latest 3.x.x version of MathJax from the distributed server, configure it to recognize mathematics in both TeX and MathML notation, and ask it to generate its output using HTML with CSS (the CommonHTML output format) to display the mathematics.
jsdelivrを用いて使用を開始する場合、次のスクリプトをWebドキュメントの <head>～</head> のブロック内に転記してください（必要であれば<body>ブロック内でもかまいませんが、<head>内の方が望ましい）。これは、配布サーバーから常にバージョン3.X.Xの最新版を読み込むためのスクリプトで、TeX記法とMathML記法の両方で数式を入力することが可能で、CSS装飾されたHTMLを使用して数式を表示します。

標準・推奨版のMathJax導入用スクリプト

<script type="text/javascript" id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>

ここで、背景に色を塗っている部分について、補足説明をします。

 

CDNサービスの種類

まず、jsdelivrとある部分について、これは、以下にあるように、CDNサービスの種類を表す部分です。

There are many free CDN services that provide copies of MathJax. Most of them require you to specify a particular version of MathJax to load, but some provide "rolling releases", i.e., links that update to the latest available version upon release (note that we also provide a means of obtaining the latest version automatically, described below).
MathJaxのコピーを提供する無料のCDNサービスは以下で挙げるように、たくさんあります。そのほとんどは、どのバージョンを読み込むかを指定する必要がありますが、例えば、アップデートされると自動的に最新版が使用できるようになっている「ローリング・リリース」によるものもあります。
  • jsdelivr.com [latest or specific version] (recommended)
  • unpkg.com [latest or specific version]
  • cdnjs.com
  • raw.githack.com
  • gitcdn.xyz
  • cdn.statically.io

このように、いろいろな種類があるようですが、特に問題がなければ、標準的な推奨サービスである jsdelivr から変更する必要はありません（おそらく、文中で言及されている便利な「ローリング・リリース」方式なのだと思われます）。

導入するバージョン

続いて、mathjax@3 の部分について、これは、導入するバージョンの指定です。

If you use the code snippet given above, you will not need to change the URL whenever MathJax is updated and the version changes, because jsdelivr offers the mathjax@3 notation for obtaining the tex-mml-chtml.js file from the latest version (3.x.x) available on the CDN.
上記のスニペットを使用する場合、jsdelivr は、常にCDNにアップロードされているtex-mml-chtml.jsバージョン3.X.Xの最新版を読み込むものであるため、MathJaxのアップデートやバージョン変更があってもURLを変更する必要はありません。
Getting a Specific Version
It is also possible to always use a specific version, regardless of the current version of MathJax. To do this, simply give the full version number in the URL; for example: * will always load version 3.0.0 of the tex-mml-chtml.js combined component file.
特定のバージョンを使用したい場合
MathJaxの最新版が何であるかにかかわらず、常に特定のバージョンを使用することも可能です。そのためには、バージョン番号をフルでURLに入力してください。例えば、以下のスクリプトでは、常にtex-mml-chtml.js のversion 3.0.0を読み込みます。

version 3.0.0導入用スクリプト

<script id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3.0.0/es5/tex-mml-chtml.js">
</script>

これについても、最新版でバグなどの問題がない限りは、自動で最新版を使うことのできる標準設定で問題ないと思います。

 

統合コンポーネントの種類

最後に、tex-mml-chtmlの部分について、これは、数式の入力方式と出力方式の指定ができるということです。

MathJax Components
To make using MathJax easier in web pages, the various pieces that make up MathJax have been packaged into separate files called "components". For example, there is a component for MathML input, and one for SVG output, and the various TeX extensions are packaged as separate components.
There are also components that combine several others into one larger file that loads everything you need to run MathJax all at once. These represent some of the standard combinations of input and output formats, and you will probably find one of these that suits your needs. You can configure the various components in order to customize how they run, even when they are loaded as part of a combined component.
MathJax コンポーネント
Webページ制作においてMathJaxをより簡単に利用できるようにするため、MathJaxを構成するさまざまな部品が「コンポーネント」と呼ばれるファイルとして、個別にパッケージ化されています。例えば、MathMLで入力し、SVG形式で表示するコンポーネントやさまざまなTeXの拡張機能がパッケージ化されたコンポーネントがあります。
いくつかのパーツを統合し、MathJaxを動かすために必要なものをすべてまとめて読み込むことのできるコンポーネントもあります。これらは、入力形式と出力形式の標準的な組み合わせによって構成されており、ユーザーは自身のニーズに適したコンポーネントを見つけることもできます。また、統合されたコンポーネントとして読み込まれた場合でも、動き方の設定をカスタマイズすることもできます。

特徴のところでも紹介したように、MathJaxには、

  1. TeX LaTeX
  2. MathML
  3. AsciiMath

という3つの入力方式があり、

  1. CSS装飾による HTML 形式
  2. SVG画像形式

という2つの出力形式があります。

これらの組み合わせとして、現在、以下の8つの統合コンポーネントがあります。

表1 統合コンポーネントの種類
コンポーネント名 入力 表示
tex-chtml TeX CSS+HTML
tex-chtml-full TeX CSS+HTML
tex-svg TeX SVG
tex-svg-full TeX SVG
tex-mml-chtml TeX& MathML CSS+HTML
tex-mml-svg TeX& MathML SVG
mml-chtml MathML CSS+HTML
mml-svg MathML MathML
＊-fullは、physics とcolorv2の拡張機能を除く、TeXの拡張機能と設定のすべてを読み込みます。
We list this file here because it will get you started quickly with MathJax without having to worry too much about configurations; but since it is one of the most general of the combined component files, it is also one of the largest, so you might want to consider a smaller one that is more tailored to your needs.
tex-mml-chtml.jsファイルは、最も一般的かつカバーされる範囲が広く、設定の心配をすることなく、簡単に使い始められるパッケージですが、もちろん、ご自身のニーズに合わせてほかのパッケージを選ぶことも可能です。

入力方法については、3つの中ではTeX記法が最も簡単なため、TeX記法のコンポーネントをおすすめします。出力形式については、基本的には、HTML+CSSで問題ないと思います。そのため、特に問題がなければ、上記のように、標準の tex-mml-chtml.js ファイルでよいでしょう。

 

TeX 記法での使い方

細かい設定が必要なければ、先述のとおり、標準的なスクリプトをHTMLの<head>～</head>にコピペすれば導入完了ですが、入力や出力について、細かく設定をカスタマイズすることもできます。ここでは、当ブログが採用しているTeX 記法での入力方法を簡単に紹介し、入力と出力の設定方法について解説します。

デリミタ（区切り文字）とインライン形式・ディスプレイ形式

TeX and LaTeX input
Mathematics that is written in TeX or LaTeX format is indicated using math delimiters that surround the mathematics, telling MathJax what part of your page represents mathematics and what is normal text. There are two types of equations: ones that occur within a paragraph (in-line mathematics), and larger equations that appear separated from the rest of the text on lines by themselves (displayed mathematics).
TeX ・ LaTeXによる入力
TeX ・ LaTeXフォーマットによって記述された数式については、数式を囲むデリミタ（区切り文字）を用いることで、数式とその他の一般テキストとを区別し、数式部分を指定することができます。また、数式には、文章内に配置される「インライン形式」と一般テキストと分離し、それら自体で独立した行で表示される「ディスプレイ形式」の2種類があります。

例えば、「3つの間には、\$a+b=c\$ という関係がある。」と入力すると、以下のように表示されます。これがインライン形式です。
3つの間には、$a+b=c$ という関係がある。

いっぽう、「3つの間には、\$\$a+b=c\$\$ という関係がある。」と入力すると、以下のように表示されます。これがディスプレイ形式です。
3つの間には、$$a+b=c$$ という関係がある。

この入力においては、ドル記号 \$ が「デリミタ」となっていて、デリミタで文章を囲むことで、その中身が「数式である」と認識されるという仕組みです。

 

入力時の注意点

Since the TeX notation is part of the text of the page, there are some caveats that you must keep in mind when you enter your mathematics.
TeX記法は、Webページのテキストの一部であるため、数式を入力する際に留意しておかなければならない注意事項がいくつかあります。
HTML Special Characters
Keep in mind that your mathematics is part of an HTML document, so you need to be aware of the special characters used by HTML as part of its markup. There cannot be HTML tags within the math delimiters as TeX-formatted math does not include HTML tags. Also, since the mathematics is initially given as text in the page, you need to be careful that your mathematics doesn’t look like HTML tags to the browser, which parses the page before MathJax gets to see it. In particular, that means that you have to be careful about things like less-than and greater-than signs (< and >), and ampersands (&), which have special meaning to web browsers.
HTMLの特殊文字
ユーザーが記述する数式は、HTML文書の一部であるため、HTMLマークアップに使用される特殊文字に注意してください。TeXフォーマットは、HTMLタグを含んでいないため、数学用のデリミタ内部でHTMLタグを機能させることはできません。同時に、基本的に数式は、Webページの文章であるため、ブラウザがHTMLタグであると誤認しないようにする必要があります。特に、不等号記号 < と > やアンパサンド & は、Webブラウザにとっては、特別な意味をもちます。
For example,
... when \$x<y\$ we have ...
will cause a problem, because the browser will think <y is the beginning of a tag named y (even though there is no such tag in HTML). When this happens, the browser will think the tag continues up to the next > in the document (typically the end of the next actual tag in the HTML file), and you may notice that you are missing part of the text of the document.
Usually, it is sufficient simply to put spaces around these symbols to cause the browser to avoid them. There are \lt and \gt macros defined to make it easier to enter < and > using TeX-like syntax.
例えば、次の記述は問題を生じます。これは、ブラウザが <y を y と名付けられたタグ（そのようなタグはHTMLにはないのですが）の始点であると認識してしまい、次の > を探し続けてしまう（典型的には、それ以降にある実際のHTMLファイルの終点）からです。このような場合、記述した文章の一部が表示されなくなります。
おうおうにして、このような記号の両側にスペースを入れると、このような事態は避けることができます。もしくは、TeX記法においては、\lt や \gt と入力することによっても、問題なく表示させることができます。
 

入力・出力設定

インラインスクリプトを用いた設定

Configuration Using an In-Line Script
The easiest way to configure MathJax is to place the MathJax object in a <script> tag just before the script that loads MathJax itself.
MathJax を設定するための最も簡単な方法は、MathJaxオブジェクトを<script>タグ内に記述し、MathJaxを読みませるためのスクリプトの直前に、配置することです。
For example:［以下のスクリプト］
This will configure the TeX input component to use single dollar signs as in-line math delimiters, and the SVG output component to use a global font cache (rather than a separate cache for each expression on the page), and then loads the latest version of the tex-svg component file from the jsdelivr CDN. This will typeset any TeX mathematics on the page, producing SVG versions of the expressions.
例えば、次のスクリプトは、TeX入力において単独のドル記号をインライン形式のデリミタとして使用し、SVG出力でグローバル・フォント・キャッシュを使用するための設定です。

スクリプト例

<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']]
  },
  svg: {
    fontCache: 'global'
  }
};
</script>
<script type="text/javascript" id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
</script>
 

入力設定

TeX入力形式のオプション

TeX Input Processor Options
The options below control the operation of the TeX input processor that is run when you include 'input/tex', 'input/tex-full', or 'input/tex-base' in the load array of the loader block of your MathJax configuration, or if you load a combined component that includes the TeX input jax. They are listed with their default values. To set any of these options, include a tex section in your MathJax global object.
以下のオプションは、TeX入力に対応するコンポーネントを導入している場合に有効です。以下のリストでは、デフォルトの値に設定されています。

入力設定ブロック（Tex記法）

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
    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(/#.*$/, '')),
    formatError:               // function called when TeX syntax errors occur
        (jax, err) => jax.formatError(err)
  }
};
Note
The default for processEscapes has changed from false in version 2 to true in version 3.
Prior to version 3.2, the multlineWidth option used to be in the main tex block, but it is now in the ams sub-block of the tex block. Version 3.2 includes code to move the configuration from its old location to its new one, but that backward-compatibility code will be removed in a future vesion.
注
processEscapesのデフォルト値は、バージョン2の「false」からバージョン3では、「true」に変更されています。
バージョン3.2以前のmultlineWidthオプションは、メインのTex設定の中にありましたが、現在は、amsサブ・ブロックの中にあります。バージョン3.2では、以前の場所から新しい場所に設定を移動させるコードが含まれていますが、その後方互換コードは、将来的に取り除かれます。
 

入力設定オプションの詳細

ここでは、上のリストのうち、色がついているものについて紹介します。

inlineMath: [ ['\(','\)'] ]
This is an array of pairs of strings that are to be used as in-line math delimiters. The first in each pair is the initial delimiter and the second is the terminal delimiter. You can have as many pairs as you want. For example, ［以下のコード］ would cause MathJax to look for \$...\$ and \\(...\\) as delimiters for in-line mathematics.
これは、インライン形式のデリミタとして用いられる文字列の対の配列です。各ペアの1つ目は始点のデリミタで、2つ目は終点のデリミタを表しています。お好みに合わせて、ペアを設定することができます。例えば、単独のドル記号をデリミタとして使いたい場合は、次のようにしてください。
inlineMath: [['$', '$'], ['\\(', '\\)']]
displayMath: [ ['$$','$$'], ['\[','\]'] ]
This is an array of pairs of strings that are to be used as delimiters for displayed equations. The first in each pair is the initial delimiter and the second is the terminal delimiter. You can have as many pairs as you want.
これは、ディスプレイ形式のデリミタとして用いられる文字列の対の配列です。各ペアの1つ目は始点のデリミタで、2つ目は終点のデリミタを表しています。お好みに合わせて、ペアを設定することができます。
processEscapes: true
When set to true, you may use \\\$ to represent a literal dollar sign, rather than using it as a math delimiter, and \\\\ to represent a literal backslash (so that you can use \\\$ to get a literal \$ or \\\\\$...\$ to get a backslash jsut before in-line math).
When false, \\\$ will not be altered, and its dollar sign may be considered part of a math delimiter. Typically, this is set to true if you enable the \$ ... \$ in-line delimiters, so you can type \\\$ and MathJax will convert it to a regular dollar sign in the rendered document.
trueに設定した場合、数式用のデリミタとしてではなく、\\\$ を文字としてのドル記号、\\\\ を文字としてのバックスラッシュを表すために使用することができます（そのため、\\\$ と入力すると \$ が表示され、\\\\\$...\$ と入力するとインライン数式の前にバックスラッシュを表示させることができます）。
falseの場合は、\$ は改変されず、ドル記号の部分は、数式用デリミタの一部であると認識されます。典型的には、インライン形式で \$ ... \$ をデリミタとして設定している場合は、true に設定することになります。
digits: /^(?:[0-9]+(?:{,}[0-9]{3})*(?:.[0-9]*)?|.[0-9]+)/
This gives a regular expression that is used to identify numbers during the parsing of your TeX expressions. By default, the decimal point is . and you can use {,} between every three digits before that. If you want to use {,} as the decimal indicator, use ［以下のスクリプト］
これは、Tex表現における構文解析中に、数字を識別するために使用されます。デフォルトでは、小数点は「ドット」であり、3桁ごとに「カンマ」を使うことができます。カンマを小数点として使いたい場合には、次のようにしてください。

カンマを小数点として使いたい場合

MathJax = {
  tex: {
    digits: /^(?:[0-9]+(?:\{,\}[0-9]*)?|\{,\}[0-9]+)/
  }
};
tags: 'none'
This controls whether equations are numbered and how. By default it is set to 'none' to be compatible with earlier versions of MathJax where auto-numbering was not performed (so pages will not change their appearance). You can change this to 'ams' for equations numbered as the AMSmath package would do, or 'all' to get an equation number for every displayed equation.
You can use \notag or \nonumber to prevent individual equations from being numbered, and \tag{} can be used to override the usual equation number with your own symbol instead (or to add an equation tag even when automatic numbering is off).
これは、数式に番号をつけるか否か、あるいは、どのようにつけるかをコントロールできます。デフォルトでは、番号の自動割り付けが実装されていなかった以前のMathJax のバージョンとの互換性を確保するため、'none' に設定されています（そのため、ページの見た目は変わりません）。'ams'に変更すると、AMSmathパッケージに準拠して番号が付与され、'all'にすると、ディスプレイ形式のすべての数式に番号が割り振られます。
自動割り付けが有効な場合、番号を割り振りたくない数式には \notag あるいは \nonumber を付けてください。また、\tag{} を用いると、番号を上書きで指定することができます。
 
tagSide: 'right'
This specifies the side on which \tag{} macros will place the tags, and on which automatic equation numbers will appear. Set it to 'left' to place the tags on the left-hand side.
\tag{}マクロでタグや数式番号をどちら側に表示するかを指定できます。'left'にすれば、左側にタグや番号が表示されます。
tagIndent: "0.8em"
This is the amount of indentation (from the right or left) for the tags produced by the \tag{} macro or by automatic equation numbers.
これは、タグや数式番号を付ける際の（右端、あるいは左端からの）インデント幅です。
useLabelIds: true
This controls whether element IDs for tags use the \label name or the equation number. When true, use the label, when false, use the equation number.
これは、タグの要素IDにラベル名と数式番号のどちらを使用するかをコントロールできます。trueのときは、ラベル名、falseのときは、数式番号となります。
 

インライン形式のデリミタについて

The default math delimiters are \$\$...\$\$ and \\[...\\] for displayed mathematics, and \\(...\\) for in-line mathematics. Note in particular that the \$...\$ in-line delimiters are not used by default. That is because dollar signs appear too often in non-mathematical settings, which could cause some text to be treated as mathematics unexpectedly. For example, with single-dollar delimiters, "… the cost is \$2.50 for the first one, and \$2.00 for each additional one …" would cause the phrase "2.50 for the first one, and" to be treated as mathematics since it falls between dollar signs.
to prevent these dollar signs from being used as math delimiters in a web page where dollar signs have been configured to be in-line delimiters.
ディスプレイ形式に対するデフォルトの数式デリミタは、\$\$...\$\$ と \\[...\\] です。インライン形式では、\$...\$ はデフォルトではデリミタとして設定されていないことに注意してください。これは、ドル記号が数式でない文章の中に頻繁に登場し、いくつかの文章が意図せずに数式として認識されてしまうことに起因します。例えば、単独のドル記号で囲う場合、"… the cost is \$2.50 for the first one, and $2.00 for each additional one …"　という文章は、"2.50 for the first one, and" という文が数式として認識されてしまいます。数学用デリミタとして認識させることなく、Webページの文章内で単独のドル記号を使用したい場合には、\\\$ と記述してください。
 

出力設定

MathJaxの出力フォーマット

Currently, MathJax can render math in three ways:
Using HTML and CSS to lay out the mathematics,
Using Scalable Vector Graphics (SVG) to lay out the mathematics, or
As a serialized MathML string.
The first two are implemented by the CommonHTML and SVG output processors.
If you are using one of the combined component files, then this will select one of these output processors for you. If the component file ends in -chtml, then it is the CommonHTML output processor, while if it ends in -svg then the SVG output processor will be used.
現在、MathJaxは数式を次の3つの方法でレンダリングします。
HTMLとCSSを用いる方法
スケーラブル・ベクター・グラフィックス（SVG）を用いる方法
シリアル化されたMathML文字列として出力する方法
前の2つは、CommonHTMLとSVG出力形式で実行されます。
統合コンポーネントを用いる場合、用いるコンポーネントに応じて出力形式が1つ選択されます。「-chtml」で終わるコンポーネントなら、CommonHTML出力形式、「-svg」で終わるコンポーネントなら、SVG出力形式となります。

HTMLサポート

HTML Support
The CommonHTML output processor renders your mathematics using HTML with CSS styling. [...]. This is MathJax’s primary output mode since MathJax version 2.6. Its major advantage is its quality, consistency, and the fact that its output is independent of the browser, operating system, and user environment. [...].
CommonHTML出力形式は、CSS装飾を用いたHTMLによって数式をレンダリングします。この方式は、バージョン2.6よりMathJaxの基本出力形式となっており、品質、一貫性、出力がブラウザやOSの種類、ユーザー環境から独立している点などが利点です。
 

SVGサポート

SVG Support
The SVG output processor uses Scalable Vector Graphics to render the mathematics on the page. SVG is supported in all the major browsers and most mobile devices; note, however, that Internet Explorer prior to IE9 does not support SVG (MathJax version 3 doesn’t support these in any case), [...]. The SVG output mode is high quality, and displays and prints well in all browsers. Since it uses SVG data instead of font files, it is not affected by user-based web-font blocking, or other character placement issues that sometimes occur with the HTML-based output.
SVG出力形式は、スケーラブル・ベクター・グラフィックスによってWebページ上の数式をレンダリングします。SVGは主要なブラウザすべてと、ほとんどの携帯端末でサポートされています（ただし、IE9より前のInternet ExplorerはSVGに対応しておらず、MathJaxバージョン3はこの問題に対応しません）。SVG出力モードは、すべてのブラウザでの表示や印刷において、高い品質を誇ります。フォントファイルの代わりにSVGデータを使用しているため、ユーザー側のWebフォントブロッキングやHTMLに基づいた出力で発生するその他の文字置き換えの問題に影響されません。
One advantage to the SVG output is that it is relatively self-contained (it does not rely heavily on CSS, though it does use some in certain circumstances), so it can be saved and used as an independent image. One disadvantage of this mode is that its variable-width tables become fixed size once they are typeset, and don’t rescale if the window size changes [...]. In version 3, however, equation numbers now are based on the container size, and move with changes in its size, just as they do with CommonHTML output.
SVG出力の利点の1つは、相対的に自己完結している（CSSにあまり依存しませんが、一定の状況下ではCSSを用いる場合もあります）ため、独立した画像として保存・使用される点にありますが、一度組版されると固定サイズでしか表示されず、ウィンドウサイズが変わっても大きさが変わらないという欠点もあります。ただし、バージョン3では、CommonHTMLでの出力と同じように、数式番号は、入れ物のサイズを基準とし、その大きさに対応することができます。
Finally, because mathematical characters in SVG output are produced by SVG paths, not characters in a font, they can’t be copy and pasted, as the output of the CommonHTML processor can.
SVG出力形式の数式の文字は、SVGパスによって生成されており、フォントによる文字ではないため、CommonHTMLによる出力とは異なり、コピー＆ペーストができません。
 

出力設定オプションの詳細

出力設定の設定項目には、①すべての出力形式に共通する項目（12個）、②HTML出力のみの項目（3個）、③SVG出力のみの項目（2個）があります。ここでは、共通項目4つとHTML項目を1つ紹介し、残りは省略します。

Options Common to All Output Processors
The following options are common to all the output processors listed above. They are given here with their default values, using the chtml block as an example.
次のオプションは、すべての出力形式に共通する項目です。ここにある値がデフォルトの値です。例として、chtmlブロックの場合を載せています。 
MathJax = {
  chtml: {
    scale: 1,                      // global scaling factor for all expressions
    minScale: .5,                  // smallest scaling factor to use
    mtextInheritFont: false,       // true to make mtext elements use surrounding font
    merrorInheritFont: false,      // true to make merror text use surrounding font
    mtextFont: '',                 // font to use for mtext, if not inheriting (empty means use MathJax fonts)
    merrorFont: 'serif',           // font to use for merror, if not inheriting (empty means use MathJax fonts)
    unknownFamily: 'serif',        // font to use for character that aren't in MathJax's fonts
    mathmlSpacing: false,          // true for MathML spacing rules, false for TeX rules
    skipAttributes: {},            // RFDa and other attributes NOT to copy to the output
    exFactor: .5,                  // default size of ex in em units
    displayAlign: 'center',        // default for indentalign when set to 'auto'
    displayIndent: '0'             // default for indentshift when set to 'auto'
  }
};
Note
The matchFontHeight option is no longer available on the SVG output processor, so it is no longer listed here. It is now decribed among the CommonHTML output options.
matchFontHeightは、SVGでは利用しなくなったため、ここ（共通項目）には載せていません。現在は、CommonHTML出力のオプションに載せています。

＊mtextとmerrorは、MathML入力に関係する項目であるようなので、TeX入力には関係しないと思われます。

Option Descriptions
scale: 1
The scaling factor for math compaired to the surrounding text. The CommonHTML output processor tries to match the ex-size of the mathematics with that of the text where it is placed, but you may want to adjust the results using this scaling factor. The user can also adjust this value using the contextual menu item associated with the typeset mathematics.
【共通】これは、周囲のテキストと比べたときの数式の縮尺です。CommonHTML出力においては、exサイズ（アルファベットのxを基準とした高さ）の数式をそれが配置されている文章の高さと合わせようとしますが、この縮尺を設定することで、表示をコントロールできます。
minScale: .5
This gives a minimum scale factor for the scaling used by MathJax to match the equation to the surrounding text. This will prevent MathJax from making the mathematics too small.
【共通】これは、MathJaxが周囲のテキストに数式の大きさを合わせようとしたときにおける数式の最小サイズを決めることができます。これにより、数式が小さくなりすぎないようにすることができます。
displayAlign: 'center'
This determines how displayed equations will be aligned (left, center, or right). The default is 'center'. 【共通】これは、ディスプレイ形式の数式を左揃え、中央揃え、右揃えのどれにするかを設定できます。デフォルトは中央揃えです。
displayIndent: 0
This gives the amount of indentation that should be used for displayed equations. The default is 0. A value of '1em', for example, would introduce an extra 1 em of space from whichever margin the equation is aligned to, or an offset from the center position if the expression is centered. Note that negative values are allowed.
【共通】これは、ディスプレイ形式の数式のインデントを設定できます。デフォルトは「0」です。例えば、「1em」に設定すると、左・右揃えの場合は、左・右端から1 em（1文字）分インデントが入り、中央揃えの場合は、中央からオフセットされます。負の数にも設定できます。
matchFontHeight: true
This setting controls whether MathJax will scale the mathematics so that the ex-height of the math fonts matches the ex-height of the surrounding fonts. This makes the math match the surroundings better, but if the surrounding font does not have its ex-height set properly (and not all fonts do), it can cause the math to not match the surrounding text. While this will make the lower-case letters match the surrounding fonts, the upper case letters may not match (that would require the font height and ex-height to have the same ratio in the surrounding text as in the math fonts, which is unlikely).
【HTML】これは、MathJaxが数式フォントのエックスハイト（文字の高さ）を数式以外のフォントのエックスハイトに合わせるかどうかを設定できます。これにより、数式を周りのテキストに溶け込ませることができますが、周りのフォントのエックスハイトが適切に設定されていない場合、数式とテキストの高さが不揃いになります。小文字は周りのフォントと調和するいっぽう、大文字の場合は、調和しないということもあり得ます（数式のフォントと周りのテキストのフォントが高さに関して同じ比率である必要がありますが、一般的にはそうではありません）。

出力形式選択時の注意点

出力形式を選択する際は、基本的には標準的なHTML出力で問題ないと思われますが、1つ注意点があります。それは、HTML出力の場合、「サイトやブログ全体で出力フォントを指定していると、そちらが優先されてしまい、数式のフォントがうまく表示されないことがある」という点です。筆者も、最初はHTML出力で導入しようと思っていたのですが、数式が期待していたようなフォントで表示されず、非常に困ってしまいました。

何が原因なのかが分からないため、途方に暮れていましたが、当ブログは、ブログ全体で「日本語は『Meiryo UI』、英数字は『Arial Narrow』」というふうに出力フォントを指定しているので、「それが原因かな」と思い当たり、試しにSVG出力にしたら、うまく表示されるようになってくれました（より詳細には、おそらくフォント設定で「!important」を入れてしまい、最優先になってしまったのがまずかったのかと思います）。

『SVGサポート』の中に、「ユーザー側のWebフォントブロッキングやHTMLに基づいた出力で発生するその他の文字置き換えの問題」という文言がありましたが、おそらく、このような問題を指しているのだと思われます。

 

導入・設定用スクリプトの例

最後に、導入・設定用スクリプトの例をご紹介します。以下のスクリプトをHTML内の<head>～</head> にコピペすれば、導入できます。設定は、ほとんどデフォルトで問題ないので、単独のドル記号をインライン形式のデリミタとして使用できるようにしてあるくらいですが、お好みに合わせて、各自、設定を調整してください。

TeX入力＋HTML出力用スクリプト

<!-- MathJax.start -->
<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']]
  }
};
</script>
<script type="text/javascript" id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml-full.js">
</script>
<!-- /MathJax.end -->

TeX入力・SVG出力用スクリプト

<!-- MathJax.start -->
<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']]
  }
};
</script>
<script type="text/javascript" id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg-full.js">
</script>
<!-- /MathJax.end -->

設定時の注意点

入力・出力設定を行う場合は、カッコの閉じ忘れにご注意ください。閉じ忘れると、設定が無効となり、思うように表示されません。

<script>
MathJax = {
  tex: {
    ［設定］
  }
};　←閉じ忘れに注意！（「MathJax = {」に対応したカッコ）
</script>

Bloggerでの導入

Bloggerで導入する場合は、まず、『テーマ』のページから、「カスタマイズ」の▼をクリックし、「HTMLを編集」を表示させて、HTMLの編集画面に行ってください。

続いて、<head>～</head> のどこかにスクリプトをコピペすれば、完了です。保存して閉じてください。<head>～</head>内であればどこでもいいので、例えば、<head>の直後あたりでも大丈夫です。

 

参考文献

自己紹介

自分の写真

yama

大学時代に読書の面白さに気づいて以来、読書や勉強を通じて、興味をもったことや新しいことを学ぶことが生きる原動力。そんな人間が、その時々に学んだことを備忘録兼人生の軌跡として記録しているブログです。

このブログを検索

ブログ アーカイブ

QooQ