プログラミング★さがして！

数学 ＞ Webページで数式を表現する方法

MathJax とは？ †

MathJax はMathML、LaTeX、ASCIIMathMLで記述された数式をウェブブラウザ上で表示するクロスブラウザのJavaScriptライブラリである。

MathJaxを使うと、LaTeXを使った数式の記述をWebページで表示できるようになります。

↑

公式サイト †

↑

MathJaxの使い方 †

MathJaxを使うには，<head> … </head> の中のどこかに次のように書いておきます：

<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_CHTML"></script>

If you write your own HTML (directly or via a template/theme engine), you can include MathJax by adding this snippet to your page:

<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>
↑

PukiWikiのMathJaxプラグイン †

PukiWikiでMathJaxを使えるようにするプラグインが提供されていました。

便利なツールを配布していただき、どうもありがとうございます。m(__)m

↑

mathjax.inc.phpの修正 †

2013年に作成されたmathjax.inc.phpのバージョン0.0.2は、そのままでは動かなかったので、少しだけ修正しました。
修正箇所は「MATHJAX_URL」の値です。
CDNのURLを新しいものに変更してみました。

修正前の箇所

define('MATHJAX_URL', 'http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML');

修正後の箇所

define('MATHJAX_URL', 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js?config=TeX-AMS_CHTML');
↑

CDNのURL確認 †

以下のページでCDNで配布されているMathJaxの最新バージョンが確認できます。

cdn.mathjax.orgのURLは2017年4月をもって廃止されたそうです。

↑

MathJaxの設定オプションについて †

CDNのURL末尾にある

?config=TeX-AMS_HTML
?config=TeX-AMS_CHTML

などの文字列ですが、これはMathJaxの挙動を設定するオプションだそうです。

“CommonHTML” Output Processor Options
コンフィギュレーションに TeX-AMS_CHTML を指定した場合に有効になるオプション。

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  CommonHTML: {
    matchFontHeight: false,
    mtextFontInherit: true
  }
});
</script>

“HTML-CSS” Output Processor Options
コンフィギュレーションに TeX-AMS_HTML を指定した場合に有効になるオプション。

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  "HTML-CSS": {
    availableFonts: ["STIX"],
    preferredFont: "STIX",
    webFont: "STIX-Web",
    matchFontHeight: false,
    mtextFontInherit: true
  }
});
</script>

特にこだわりがなければ既定値どおり "TeX" にするか "STIX" ("STIX-Web") を選択するのが無難だと思う
（"TeX" にするならコンフィギュレーションを TeX-AMS_CHTML にすることをお薦めする）。

とのことです。
いろいろ試してみたらいいですね。

↑

mathjax.inc.phpの記法 †

https://dev.abicky.net/pukiwiki/plugins/index.php?mathjax.inc.php

#mathjax(数式)
#mathjax(CSS スタイル)
&mathjax{数式};
&mathjax(CSS スタイル){数式};
&mathjax(CSS スタイル);
↑

mathjax.inc.phpの使用例 †

PukiWikiでこのように書くと、

#mathjax(y=ax^2+bx+c)

こんな数式として表示されます。

\[ y=ax^2+bx+c \]
  • その他の例
    LaTeXの書き方を勉強しないとダメですね？
#mathjax(p(\bm w) = \prod^N_{n=1}p(w_n))
\[ p(\bm w) = \prod^N_{n=1}p(w_n) \]

赤色、中央揃え、サイズを 0.5 倍にする

#mathjax(color: red; text-align: center; font-size: 50%)
#mathjax(p(\bm w) = \prod^N_{n=1}p(w_n))
\[ p(\bm w) = \prod^N_{n=1}p(w_n) \]
#mathjax(p(\bm w)=\sum_z p(z) \prod^N_{n=1} p(w_n|z))
\[ p(\bm w)=\sum_z p(z) \prod^N_{n=1} p(w_n|z) \]

デフォルトのスタイルに戻す

#mathjax()
#mathjax(p(d,w_n)=p(d)\sum_z p(w_n|z)p(z|d))
\[ p(d,w_n)=p(d)\sum_z p(w_n|z)p(z|d) \]

数式には amsmath, amssymbols, color パッケージのマクロも使用可能です。また、\bm や \argmax, \argmin も定義してあります。なお、数式番号は自動的に付与されないので \tag で明示的に指定する必要があります。

#mathjax(\begin{eqnarray} {\color[rgb]{1,0,0}f(\bm x)} &=& (x_1 + x_2)^2 \\ &=& x_1^2 + 2 x_1 x_2 + x_2^2 \end{eqnarray})
\begin{eqnarray} {\color[rgb]{1,0,0}f(\bm x)} &=& (x_1 + x_2)^2 \\ &=& x_1^2 + 2 x_1 x_2 + x_2^2 \end{eqnarray}
#mathjax((\gamma^*,\phi^*)=\argmin_{(\gamma,\phi)} D_\mathrm{KL}(q(\theta,z|\gamma,\phi)||p(\theta,z|w,\alpha,\beta)) \tag{5})
\[ (\gamma^*,\phi^*)=\argmin_{(\gamma,\phi)} D_\mathrm{KL}(q(\theta,z|\gamma,\phi)||p(\theta,z|w,\alpha,\beta)) \tag{5} \]
#mathjax(\begin{eqnarray} \frac{\pi}{2} &=& \left( \int_{0}^{\infty} \frac{\sin x}{\sqrt{x}} dx \right)^2 \\ &=& \sum_{k=0}^{\infty} \frac{(2k)!}{2^{2k}(k!)^2} \frac{1}{2k+1} \\ &=& \prod_{k=1}^{\infty} \frac{4k^2}{4k^2 - 1} \end{eqnarray})
\begin{eqnarray} \frac{\pi}{2} &=& \left( \int_{0}^{\infty} \frac{\sin x}{\sqrt{x}} dx \right)^2 \\ &=& \sum_{k=0}^{\infty} \frac{(2k)!}{2^{2k}(k!)^2} \frac{1}{2k+1} \\ &=& \prod_{k=1}^{\infty} \frac{4k^2}{4k^2 - 1} \end{eqnarray}
トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2019-09-28 (土) 14:45:18 (1669d)