
テキストから数式に変換するプラグイン・アプリをまとめます。
ブラウザで実行できるもの、JavaScriptのライブラリ、VSCodeのプラグインなど関連するものをリスト化しました。

それぞれのサンプルまでは載せていません。

## 数式のエンジン・記法について

調べてみると思った以上に数式エンジンが多様だった。
記法もそれぞれあり一長一短がありそうです。

TeX記法など体系が曖昧なため、誤解を招く表現があるやもしれません。
あらかじめご了承ください。

どれが良いかは判断付かないため、見つけたものをここに書きだしておきます。

- [KaTeX](https://katex.org/)
- [MathML(Mathematical Markup Language)](https://developer.mozilla.org/ja/docs/Web/MathML)
- [MathJax](https://www.mathjax.org/)
- [UnicodeMath](https://blogs.msdn.microsoft.com/murrays/2016/11/30/unicodemath-version-3-1/)

### KaTeX

- [KaTeX](https://katex.org/)
- [GitHub](https://github.com/KaTeX/KaTeX)

> KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web.

ライセンス：MIT License

[ドナルド・クヌースのTeX](https://ja.wikipedia.org/wiki/TeX)をベースにしている。
MathJaxよりもブラウザでの描画が早いことを謳っています。

記法については[こちら](https://katex.org/docs/supported.html)にまとまっています。

### MathML

- [MDN - Mozilla](https://developer.mozilla.org/ja/docs/Web/MathML)

> Mathematical Markup Language (MathML) は、数学的表記を記述し、その構造と内容を表現するための XML マークアップ言語です。

数式を描画するマークアップ言語。
HTMLやXMLのように`<>`で書くような言語です。

[MathMLを対象とした数式検索エンジンの設計](https://www.jstage.jst.go.jp/article/infopro/2007/0/2007_0_45/_article/-char/ja/)といった論文も見つけた。

### MathJax

- [MathJax](https://www.mathjax.org/)
- [GitHub](https://github.com/asciimath/asciimathml)

> **Beautiful math in all browsers**  
> A JavaScript display engine for mathematics that works in all browsers.   
> No more setup for readers. It just works.

ライセンス：Apache License 2.0

JavaScriptを使ってブラウザ上に数式を描画するエンジン。
依存がないためこれだけで使える。

### UnicodeMath

- [MSDN](https://blogs.msdn.microsoft.com/murrays/2016/09/07/unicodemath/)

Unicodeの「数式用の書体指定付き文字」となる。
対応したフォントがあれば、数式の字体を変えられそう。

下のサイトの解説がとても詳しい。(3)まである。

- [unicode-math を完全に理解したい話(1)](https://zrbabbler.hatenablog.com/entry/20180915/1537031499)

### MathJaxとKaTeXについて

どちらもTeX文書の変換のためのライブラリであり、記法はほぼ同じ。
パースの速度面ではKaTeXが優勢です。

比較について詳しくは下記を参照してください。

- [TeXライブラリの選出](https://github.com/NetCommons3/Wysiwyg/issues/12)

## JavaScript, npm

以下はJavaScriptまたはnpmで使えるもの。

### markdown-it-latex

- [GitHub](https://github.com/tylingsoft/markdown-it-latex)
- [npm](https://www.npmjs.com/package/markdown-it-latex)

マークダウンをHTMLに変換する[markdown-it](https://github.com/markdown-it/markdown-it)の数式プラグイン。
**KaTeX**と**AsciiMath**に対応している。

このブログでもmarkdown-it、processmdと合わせて利用しています。

例えば、オイラーの公式も下記のように書けます。

KaTeX記法
````
```math
e^{i\pi}+1= 0
```
````

変換後の数式
```math
e^{i\pi}+1= 0
```


- [コマンドでマークダウンを変換するprocessmd | npm](https://www.suzu6.net/posts/120-npm-procesmd)
- [美しい数式をKaTexで美しく書こう](https://www.suzu6.net/posts/102-katex-math-functions)


### AsciiMath

- [AsciiMath](http://asciimath.org/)
- [GitHub](https://github.com/asciimath/asciimathml/blob/master/ASCIIMathML.js)

ブラウザ上でテキストから数式を変換できるJavaScriptライブラリ。
サイトにサンプルがあるので実行確認できます。
変換には[MathJax](https://www.mathjax.org/)を用いている。

CDN配信されているため、以下のスクリプトで導入できます。
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=AM_CHTML"></script>
```

## VSCodeプラグイン

Visual Studio Codeで数式を書けるプラグイン。
TeXとマークダウンそれぞれに対応したものがある。

### LaTeX Workshop

- [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=James-Yu.latex-workshop)

Visual Studio Codeのプラグインの中で一番人気のLaTeXプラグイン。
プレビューやスニペット、シンタックスなども同梱しているので、LaTeXで書くならまずはこれを入れるのが良さげです。

### Markdown All in One

- [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)

Markdownで文章を書くならこれだけが一押し。
数式と入力補完も同梱されており下記のように書ける。エンジンはKaTeXかな。

```
$$
f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
$$
```

```math
f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
```

あとは、[Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf)を入れたら十全。

### mdmath

- [GitHub](https://github.com/goessner/mdmath)
- [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=goessner.mdmath)

ライセンス：MIT License

Visual Studio Codeでマークダウン＋数式を書くことができるプラグイン。
数式の変換にはKaTeXを使っている。

### Markdown Math

- [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=koehlma.markdown-math)

$\href{https://katex.org/}{\KaTeX}$記法。

### Fast Unicode Math Characters

- [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=GuidoTapia2.unicode-math-vscode)

UnicodeMathに対応したプラグイン。

## その他サービス

### SearchOnMath

- [SearchOnMath](http://searchonmath.com/)

数式のための検索エンジン！
数式を使っているサイトを検索してくれる。

Googleに慣れてしまっているため精度や使い勝手はそこまでだが、試みはとても面白い。

- [数学の数式・記号のあるページを簡単に検索できる「SearchOnMath」- GigaZine](https://gigazine.net/news/20150225-searchonmath/)

### Mathematics Stack Exchange

- [Mathematics Stack Exchange](https://math.stackexchange.com/)

数式についての質問サイト。
質問タイトルが数式だらけで面白い。

恐らくMathJaxを使っています。

### maths online HTML formula tool

- [maths online HTML formula tool](https://www.univie.ac.at/future.media/moe/formeln/index.html)

HTMLでの特殊文字の書き方を確認できるツールサイト。
Symbolフォントが確認できる。

オーストリアのウィーン大学（Universität Wien）のドメイン上にあって驚いた。
Future Mediaというマルチメディア品質の製品の推進協会が作られたそうです。

## 終わりに

今後も、良さそうなアプリ・プラグインを見つけたら追記する予定です。

数式を書くためのエンジン・プラグイン・アプリのまとめ



Emojis in this text will be replaced: :dog: :+1:

Lift($L$) can be determined by Lift Coefficient ($C_L$) like the following
equation.

$$
L = \frac{1}{2} \rho v^2 S C_L
$$

**npm**のライブラリ**markdown-it-latex**を使って数式をKaTeXで表現しています。
どんな感じか数式を並べてみたいのでまとめました。
これを機に、$ \KaTeX $表記についても知ってもらえると嬉しいです。
Qiitaでも使っているようです。

数式は$\KaTeX$記法が学べるように個人的な好みで選びました。

---

「KATEX」という字がガタガタして見えているはずです。
これは[公式](https://katex.org/)のロゴマークで、こちらも$\KaTeX$表記で書けるようになっています。

```txt
\KaTeX
```


## Markdownから変換

記事自体はMarkdownからHTMLに変換しています。

- [markdown-it](https://github.com/markdown-it/markdown-it)
- [markdown-it-highlight](https://github.com/tylingsoft/markdown-it-highlight)
- [markdown-it-latex](https://www.npmjs.com/package/markdown-it-latex)

この３つがあればMarkdownで書いた文書を数式やコードシンタックスを付けて変換できます。

markdown-it-latexを解析したら、**KaTeX**で変換していることがわかりました。

- [KATEX](https://katex.org/docs/supported.html)

こちらにKaTeXでの表記方法が載っています。

また、まとめて利用したい場合は[processmd](https://www.npmjs.com/package/processmd)をインストールすると良いです。
コマンドでjson形式のデータに変換することもできます。

## 1. 三平方の定理

> 直角三角形の斜辺の長さを c, 他の2辺の長さを a, b とする。
> $$
> c^2 = a^2 + b^2
> $$

誰もが知ってる三平方の定理。ピタゴラスの定理とも言います。
[wiki](https://ja.wikipedia.org/wiki/%E3%83%94%E3%82%BF%E3%82%B4%E3%83%A9%E3%82%B9%E3%81%AE%E5%AE%9A%E7%90%86)を見るとこんなにたくさんの証明方法があるんですね。

````
a^2 + b^2 = c^2
````

KaTeXではシンプルに書けます。
`^`が累乗を表す。

## 2. オイラーの等式

> $$
> e^{i\pi}+1= 0
> $$


ネイピア数$e$、虚数$i$、円周率$\pi$と有名な定数を含みます。
さらに$1, 0$と重要な数も含むので、$e^{i\pi} = 1$よりも個人的に好みです。

````
e^{i\pi}+1= 0
````

KaTeXではこんな感じ。
円周率は`\pi`です。
指数に文字が多い場合は波かっこを使って括るとまとまります。`e^{i+1}`が$e^{i+1}$になる。

## 3. オイラーの公式

> $$
> e^{i\theta} = \cos\theta + i \sin\theta
> $$

微分方程式を解く人は必ずお世話になる公式。  
私は電子工学も専攻していたので、物理、電気、半導体、通信とどんな科目でも出てくる公式でした。
画像解析の時も出てきたな。

````
e^{i\theta} = \cos\theta + i \sin\theta
````

KaTeXで三角関数はもちろんサポートしています。
`\tan`や`\sinh`などもあります。

$\aleph\beta\gamma$などのギリシャ文字は頭文字を大文字にすると`\Theta` $\Theta$のように大文字になります。

## 4. 正規分布（ガウス分布）

> 平均を$\mu$, 分散を$\sigma^2 \gt 0$とする正規分布とは、確率密度関数が次の形で与えられる確率密度関数。
> $$
> f(x) = \frac{1}{\sqrt{2\pi\sigma^2}}\exp{-\frac{(x-\mu)^2}{2\sigma^2}}
> $$

統計学の分野から重要な数式を選びました。
数式自体は美しくはないですが、グラフにすると釣り鐘型の綺麗な曲線を描きます。
また、$\mu \pm \sigma$が変曲点となる特徴も持っています。

```
f(x) = \frac{1}{\sqrt{2\pi\sigma^2}}\exp{-\frac{(x-\mu)^2}{2\sigma^2}}
```

平方根は`\sqrt{x}` $\sqrt{x}$、分数は`\frac{1}{x}` $\frac{1}{x}$で表わします。
また、$\mu \pm \sigma$の$\pm$は`\pm`です。


## 5. ガウス積分

> $$
> \int_{-\infty}^{\infty} f(x) dx = \sqrt{\pi}
> $$

ガウス積分あるいはオイラー＝ポアソン積分です。


```
\int_{-\infty}^{\infty} f(x) dx = \sqrt{\pi}
```

- $\int$ `\int`
- $\int_{b}^{a}$ `\int_{b}^{a}`

不定積分と定積分の書き分けです。

- $\iint$ `\iint`
- $\iiint$ `\iiint`

フォルテッシシモみたいな重積分も書けます。

## 6. 調和数（発散列）

> $$
> \frac{1}{1} + \frac{1}{2} + \frac{1}{3} + \dots = \displaystyle\sum_{i=1}^\infty \frac{1}{n}= \infty
> $$

なぜ分数を足していったら発散するのでしょうか？
不思議です。

```
\frac{1}{1} + \frac{1}{2} + \frac{1}{3} + \dots = \displaystyle\sum_{i=1}^\infty \frac{1}{n}= \infty
```

無限大$\infty$は`infty`と書きます。

`\dots`は種類が多いのでまとめて覚えちゃいます。

- $\dot{A}$ `\dot{A}`
- $\dots$ `\dots`
- $\ddots$ `\ddots`
- $\ldots$ `\ldots`
- $\vdots$ `\vdots`

`\sdot`で中点・が出るはずだけどエラーになる。。。

## 7. バーゼル問題

> $$
> \frac{1}{1^2} + \frac{1}{2^2} + \frac{1}{3^2} + \dots = \displaystyle\sum_{i=1}^\infty \frac{1}{n^2}= \frac{\pi^2}{6}
> $$

なぜ分母を２乗にしたら収束するのでしょうか？
不思議です。


```
\frac{1}{1^2} + \frac{1}{2^2} + \frac{1}{3^2} + \dots = \displaystyle\sum_{i=1}^\infty \frac{1}{n^2}= \frac{\pi^2}{6}
```

級数は`\sum_{i=1}^n ` $\sum_{i=1}^n$と書きます。
`\sum`の前に`\displaystyle` $\displaystyle\sum_{i=1}^n$と`\textstyle` $\textstyle\sum_{i=1}^n$で表示を変えることもできます。

## おわりに

KaTeXで数式をきれいに表示出来ました。
基本的な表記方法は書けたような気がします。

また、以下の記事でもKaTeXで数式を書いています。

- [dictで多変数の多項式の同類項をまとめる|Python](https://www.suzu6.net/posts/100-similar-term/)
- [P5jsでガウス分布のデータセットを作成する](https://www.suzu6.net/posts/98-p5js-gaussian/)

## 参考

- [katex.org](https://katex.org/docs/supported.html)
- [数学の面白い公式8選 – 私が選んだ美しくて面白い公式を紹介します](https://analytics-notty.tech/interesting-formula-in-mathematics/)
- [Qiitaの数式チートシート](https://qiita.com/PlanetMeron/items/63ac58898541cbe81ada)


<div class="cstmreba"><div class="booklink-box"><div class="booklink-image"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F14619491%2F" target="_blank" ><img src="https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/7051/9784774187051.jpg?_ex=200x200" style="border: none;" /></a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"></div><div class="booklink-info"><div class="booklink-name"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F14619491%2F" target="_blank" >LATEX2ε美文書作成入門改訂第7版</a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"><div class="booklink-powered-date">posted with <a href="https://yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a></div></div><div class="booklink-detail">奥村晴彦/黒木裕介 技術評論社 2017年01月23日    </div><div class="booklink-link2"><div class="shoplinkrakuten"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F14619491%2F" target="_blank" >楽天ブックス</a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"></div><div class="shoplinkamazon"><a href="https://www.amazon.co.jp/exec/obidos/asin/4774187054/suzu60c-22/" target="_blank" >Amazon</a></div><div class="shoplinkkindle"><a href="https://www.amazon.co.jp/gp/search?keywords=LATEX2%83%C3%94%FC%95%B6%8F%91%8D%EC%90%AC%93%FC%96%E5%89%FC%92%F9%91%E67%94%C5&__mk_ja_JP=%83J%83%5E%83J%83i&url=node%3D2275256051&tag=suzu60c-22" target="_blank" >Kindle</a></div>                              	  	  	  	  	</div></div><div class="booklink-footer"></div></div></div>