GitHub の Issue などで数式を表示する

# 本日は

- インターネットの発展によって自分の学んだ事，知見を知って欲しいことを誰でも気軽に発信できるようになってきています．
- Qiita では Markdown を用いることで構造化された文章を作成する事ができます．必要に応じてプログラムの知見をサンプルコードを通して行う事ができます．

```julia
# これは Julia のサンプルコードです．
function hello(x)
    println("Hello World")
end
```


- 自然科学を記述するにあたって欠かせない数学はどうでしょう？私がQiitaのアカウントを持ったきっかけは

$$
\left(\frac{d^2 q^{i}}{d s^2} + \Gamma^i_{jk} \frac{d q^j}{ds}\frac{d q^k}{ds}\right)\mathbf{e}_i = 0
$$

のように数式の入力がサポートされている事を知ったからです．これにより Qiita でも数学のトピックを紹介したり，数学的な概念を解説し対応するプログラムを同時に記述する事ができます．なんて素晴らしいことでしょう. 


# GitHub ではどうでしょうか？

- OSS プロジェクトをホスティングするGitHubを用いるとソースコードを公開し，共有する事ができます．Gitの機能で文章の管理が容易になるだけでなく，プルリクエストの機能で共同で機能の追加修正をする事ができます．Issueトラッカーを使う事で機能追加のディスカッション，バグレポートを提出する事で元のプロジェクトを改善する事ができます．
- 最近の自分の活動は [MathSeminar.jl](https://github.com/terasakisatoshi/MathSeminar.jl) という 静的サイトジェネレータ [Franklin.jl](https://franklinjl.org/) をベースに数学的文章を記述をメインにすることを前提とした自分用の執筆インフラを整備しています．ホームページのビルド時にプログラムを走らせその実行結果を可視化を含めた表示する仕組みや定義・命題・証明スタイル．必要に応じて `定理1.2.3` のように定理番号を__自動付与__させ，その命題をアンカーで参照することができます．Franklin.jl はマークダウンで記述する事ができます．Qiita ユーザーであれば慣れたシンタックスで書く事ができるので挑戦も容易です．
- さて，数学に関する文章も__広い意味でソースコード__とみなせば OSS プロジェクトと同様の活動ができるはずです．執筆に用いた細かいTipもふくめオープンにしておけばそれをもとに別の素晴らしいトピックを作ってくれるかもしれませんし，自分が細かく書かなかった証明の穴を埋めるプルリクエストがやってくるかもしれません．
- Issueで「ここわからないんだけれど・・・？みんなどう考えた？」のような議論ができるポテンシャルを秘めているはずです．そのはずなんです．

## Issueで議論は可能か？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135978/8bb0839f-3b58-377d-5fb7-613a28968e57.png)

はい．ご覧の通り`$`で囲んで挟むスタイルを利用する事ができません．多くの人はこの時点で絶望した事でしょう．

- ただし，GitHub のマークダウンで数式を表示しようという試みはあります．ここではその方法を紹介し，どの程度のことができるか試してみます．

# やりましょう．

1. ひとまず，素材を持ってきます．[TeXclip](https://texclip.marutank.net/) などで書きたい数式を $\LaTeX$ コマンドで記述します，

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135978/382456b7-beb5-da3c-cfce-b206e6a1e52d.png)

2. 次に https://alexanderrodin.com/github-latex-markdown/ にアクセスします．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135978/f65742ec-a5e9-40ad-2ea3-24bcb896661d.png)

`LaTeX formula` のところにコマンドをペーストします．

下図のように　`![\begin` ... で始まる文字列をコピーします．右側にあるアイコンをクリックしてクリップボードにコピーすることが可能です．また `Preview` を使うことで表示を確認できます．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135978/92e56a2c-d42e-9120-3a10-226d1567ba21.png)


そしてコピーしたものをGitHubのIssueなどに貼り付けます．

```
![\begin{align*}   \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} = \frac{\pi}{2} \end{align*}](https://render.githubusercontent.com/render/math?math=%5Cbegin%7Balign*%7D%20%20%20%5Cleft(%20%5Cint_0%5E%5Cinfty%20%5Cfrac%7B%5Csin%20x%7D%7B%5Csqrt%7Bx%7D%7D%20dx%20%5Cright)%5E2%20%3D%20%20%20%5Csum_%7Bk%3D0%7D%5E%5Cinfty%20%5Cfrac%7B(2k)!%7D%7B2%5E%7B2k%7D(k!)%5E2%7D%20%5Cfrac%7B1%7D%7B2k%2B1%7D%20%3D%20%20%20%5Cprod_%7Bk%3D1%7D%5E%5Cinfty%20%5Cfrac%7B4k%5E2%7D%7B4k%5E2%20-%201%7D%20%3D%20%5Cfrac%7B%5Cpi%7D%7B2%7D%20%5Cend%7Balign*%7D)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135978/c240380a-5474-8700-8ef4-c57188583f9f.png)

できた！

## Qiita でもできた

ちなみにGitHubに限らず，Qiitaにも貼り付けることができます．結果は下記の通り:


![\begin{align*}   \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} = \frac{\pi}{2} \end{align*}](https://render.githubusercontent.com/render/math?math=%5Cbegin%7Balign*%7D%20%20%20%5Cleft(%20%5Cint_0%5E%5Cinfty%20%5Cfrac%7B%5Csin%20x%7D%7B%5Csqrt%7Bx%7D%7D%20dx%20%5Cright)%5E2%20%3D%20%20%20%5Csum_%7Bk%3D0%7D%5E%5Cinfty%20%5Cfrac%7B(2k)!%7D%7B2%5E%7B2k%7D(k!)%5E2%7D%20%5Cfrac%7B1%7D%7B2k%2B1%7D%20%3D%20%20%20%5Cprod_%7Bk%3D1%7D%5E%5Cinfty%20%5Cfrac%7B4k%5E2%7D%7B4k%5E2%20-%201%7D%20%3D%20%5Cfrac%7B%5Cpi%7D%7B2%7D%20%5Cend%7Balign*%7D)

## もう少し見栄えを良くしたい

和や積分の範囲などの小さな文字の位置がちょっと気に入らないと感じる人もいるでしょう．この場合は先ほどの例の前に `\displaystyle` をつけておきます．

その結果がこちら

![\displaystyle \begin{align*}   \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} = \frac{\pi}{2} \end{align*}](https://render.githubusercontent.com/render/math?math=%5Cdisplaystyle%20%5Cbegin%7Balign*%7D%20%20%20%5Cleft(%20%5Cint_0%5E%5Cinfty%20%5Cfrac%7B%5Csin%20x%7D%7B%5Csqrt%7Bx%7D%7D%20dx%20%5Cright)%5E2%20%3D%20%20%20%5Csum_%7Bk%3D0%7D%5E%5Cinfty%20%5Cfrac%7B(2k)!%7D%7B2%5E%7B2k%7D(k!)%5E2%7D%20%5Cfrac%7B1%7D%7B2k%2B1%7D%20%3D%20%20%20%5Cprod_%7Bk%3D1%7D%5E%5Cinfty%20%5Cfrac%7B4k%5E2%7D%7B4k%5E2%20-%201%7D%20%3D%20%5Cfrac%7B%5Cpi%7D%7B2%7D%20%5Cend%7Balign*%7D)

これなら問題ないでしょう．もちろん，行列も記述可能ですし `\displaystyle` をつけておけば複数行に渡す式変形を記述することもできます．下記は確率変数の変換によって対応する密度関数がどう変化するかを書いた例です．

![\displaystyle \begin{align*} p(y) &= \int_{-\infty}^\infty \delta(y-f(x)) q(x) dx, \quad f(x)=ax\\      &= \int_{-\infty}^\infty \delta(y-ax) q(x) dx \\      &= \int_{-\infty}^\infty \frac{1}{a}\delta(y-\tilde{x}) q\left(\frac{\tilde{x}}{a}\right) d\tilde{x} \\      &= \frac{1}{a}q\left(\frac{y}{a}\right) \end{align*}](https://render.githubusercontent.com/render/math?math=%5Cdisplaystyle%20%5Cbegin%7Balign*%7D%20p(y)%20%26%3D%20%5Cint_%7B-%5Cinfty%7D%5E%5Cinfty%20%5Cdelta(y-f(x))%20q(x)%20dx%2C%20%5Cquad%20f(x)%3Dax%5C%5C%20%20%20%20%20%20%26%3D%20%5Cint_%7B-%5Cinfty%7D%5E%5Cinfty%20%5Cdelta(y-ax)%20q(x)%20dx%20%5C%5C%20%20%20%20%20%20%26%3D%20%5Cint_%7B-%5Cinfty%7D%5E%5Cinfty%20%5Cfrac%7B1%7D%7Ba%7D%5Cdelta(y-%5Ctilde%7Bx%7D)%20q%5Cleft(%5Cfrac%7B%5Ctilde%7Bx%7D%7D%7Ba%7D%5Cright)%20d%5Ctilde%7Bx%7D%20%5C%5C%20%20%20%20%20%20%26%3D%20%5Cfrac%7B1%7D%7Ba%7Dq%5Cleft(%5Cfrac%7By%7D%7Ba%7D%5Cright)%20%5Cend%7Balign*%7D)

# まとめ

- 技術的には可能ということがわかりました．上記の変換ツールを作成した a-rodin 氏 の gist で動作原理を知ることができます: https://gist.github.com/a-rodin/fef3f543412d6e1ec5b6cf55bf197d7b#file-a-hack-for-showing-latex-formulas-in-github-markdown-md

- 変換ツールを経由する意味では clumsy ではありますが全くできないというわけではなさそうです．
- 実際のソフトを書く仕事でも「あー, これ言葉で説明せず数式一行で理解させられるのに〜」というところで悶々することもなくシュッと書いてポッと議論できればいいですね．

# References:

- [the hack for showing LaTeX formulas in GitHub Markdown](https://gist.github.com/a-rodin/fef3f543412d6e1ec5b6cf55bf197d7b)
- [Showing LaTeX formulas in GitHub markdown.md #82](https://github.com/terasakisatoshi/MathSeminar.jl/issues/82)