- 追加された行はこの色です。
- 削除された行はこの色です。
- MathJax へ行く。
#author("2019-09-28T07:39:28+00:00","default:sagasite","sagasite")
[[数学]] ＞ Webページで数式を表現する方法
#contents
*MathJax とは？ [#n5c48d79]
-MathJax - Wikipedia https://ja.wikipedia.org/wiki/MathJax
>MathJax はMathML、LaTeX、ASCIIMathMLで記述された数式をウェブブラウザ上で表示するクロスブラウザのJavaScriptライブラリである。
MathJaxを使うと、LaTeXを使った数式の記述をWebページで表示できるようになります。
**公式サイト [#l91a77ce]
-MathJax | Beautiful math in all browsers. https://www.mathjax.org/
*MathJaxの使い方 [#j4913533]
-MathJaxによる数式表示 https://oku.edu.mie-u.ac.jp/~okumura/javascript/mathjax.html
>MathJaxを使うには，<head> … </head> の中のどこかに次のように書いておきます：
<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_CHTML"></script>
-MathJax | Getting Started https://www.mathjax.org/#gettingstarted
>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プラグイン [#qfc59aeb]
PukiWikiでMathJaxを使えるようにするプラグインが提供されていました。
-PukiWiki MathJax - Google 検索 https://www.google.com/search?q=PukiWiki+MathJax
-MathJax 用 PukiWiki プラグインを作ってみた - あらびき日記 https://abicky.net/2013/02/17/195224/
-mathjax.inc.php - PukiWiki https://dev.abicky.net/pukiwiki/plugins/index.php?mathjax.inc.php
-GitHub - abicky/mathjax_for_pukiwiki: MathJax plugin for PukiWiki https://github.com/abicky/mathjax_for_pukiwiki
便利なツールを配布していただき、どうもありがとうございます。m(__)m
**mathjax.inc.phpの修正 [#zbd64b68]
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確認 [#h920a27b]
以下のページでCDNで配布されているMathJaxの最新バージョンが確認できます。
-mathjax - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites! https://cdnjs.com/libraries/mathjax
cdn.mathjax.orgのURLは2017年4月をもって廃止されたそうです。
-MathJax CDN shutting down on April 30, 2017. Alternatives available. | MathJax https://www.mathjax.org/cdn-shutting-down/
***MathJaxの設定オプションについて [#dce7e261]
CDNのURL末尾にある
?config=TeX-AMS_HTML
?config=TeX-AMS_CHTML
などの文字列ですが、これはMathJaxの挙動を設定するオプションだそうです。
-ちょこっと MathJax： 初期設定 — しっぽのさきっちょ | text.Baldanders.info https://text.baldanders.info/remark/2017/09/getting-started-mathjax-1/
>“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の記法 [#s6c81799]
https://dev.abicky.net/pukiwiki/plugins/index.php?mathjax.inc.php
#mathjax(数式)
#mathjax(CSS スタイル)
&mathjax{数式};
&mathjax(CSS スタイル){数式};
&mathjax(CSS スタイル);
*mathjax.inc.phpの使用例 [#gcefe169]
PukiWikiでこのように書くと、
#mathjax(y=ax^2+bx+c)
こんな数式として表示されます。
#mathjax(y=ax^2+bx+c)
-その他の例
LaTeXの書き方を勉強しないとダメですね？
#mathjax(p(\bm w) = \prod^N_{n=1}p(w_n))
#mathjax(p(\bm w) = \prod^N_{n=1}p(w_n))
赤色、中央揃え、サイズを 0.5 倍にする
#mathjax(color: red; text-align: center; font-size: 50%)
#mathjax(color: red; text-align: center; font-size: 50%)
#mathjax(p(\bm w) = \prod^N_{n=1}p(w_n))
#mathjax(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))
#mathjax(p(\bm w)=\sum_z p(z) \prod^N_{n=1} p(w_n|z))
デフォルトのスタイルに戻す
#mathjax()
#mathjax()
#mathjax(p(d,w_n)=p(d)\sum_z p(w_n|z)p(z|d))
#mathjax(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})
#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})
#mathjax((\gamma^*,\phi^*)=\argmin_{(\gamma,\phi)} D_\mathrm{KL}(q(\theta,z|\gamma,\phi)||p(\theta,z|w,\alpha,\beta)) \tag{5})
#mathjax((\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})
#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})
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
