超便利。Markdownでグラフと数式の入った文書を簡単に書く（VSCode + gnuplot/matplotlib）。

# はじめに
仕事や研究上，数式やグラフの入った文書を書くことの多い人向け。VSCodeエディタで`Markdown-review-enhanced`を使うと、文書・数式の記述とグラフ描画まで、１つのMarkdownファイル内で全て完結する。

自分用の計算メモはもちろん、ちょっとしたレポートや技術資料ならこれで十分。

2023.5追記：
当初使用していたAtomエディタが2022年で開発中止になったため、VSCodeを用いる方法に変更。

<img width="1911" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/644660/2056ac01-ed97-a619-1a3a-9db8aa894f29.png">
こんな感じにリアルタイムに数式、グラフを書いていくことができる。グラフ描画はgnuplotかmatplotlibを使う。描画スクリプトは非表示にすることもできる。


それなりのコードで数値計算をして、インタラクティブにプロットしたいならJupyter notebookでコーディングしてmatplotlib、あるいはHydrogenを使うのがよいと思う。
さくさくMarkdown文書を書きながら、ちょっとしたプロットをしたい場合にはMarkdown+gnuplotがオススメ。


# 環境
MacOS 10.15 Catalina + VSCode 1.77.3 (Universal) で動作確認。
<!--
MacOS 10.15 Catalina + Atom 1.48.0 x64 で動作確認。
Windows版Atomでもできるはずだが未確認。VScodeを使った方法は[こちら]#(https://qiita.com/tamaki_osamu/items/b5785930a77d44bba59c)を参照。
-->


# Gnuplotのインストール
以下を参考に、Homebrewを使ってinstallしておく。
[Mac OS (Catalina) にHomebrewでgnuplot5をインストール](https://qiita.com/atmol/items/b0a12753a38782d5450c)

gnuplotではなくMatplotlibでグラフを書きたい場合はpython環境をinstallしておく。
関数プロットはMatplotlibよりgnuplotの方が便利な気がする。

<!--
# ~~Atomエディタのセットアップ（~５分）~~
Atomは2022年で開発中止になったので、VSCodeをつかいます。
#### ~~Atomのインストール~~
~~https://atom.io から最新版のAtomをインストールしてアプリケーションフォルダに入れる。~~

#### ~~markdown-preview-enhancedを入れる。
Atomを起動し、メニューのAtom>Preferencesから，Installタブを開き，markdown-preview-enhancedを検索してInstallする。~~                            

<img width="1245" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/644660/4c8af6e7-855f-77aa-4c6d-bc863cbdc405.png">
-->

# Visual Studio Code (VSCode)エディタのセットアップ（~５分）
Atomは2022年で開発中止になったので、VSCodeをつかいます。
#### VSCodeのインストール
https://code.visualstudio.com/download から最新版のVSCodeをインストールする。

#### markdown-preview-enhancedを入れる。
VSCodeを起動し、メニューのView>Extensions （または左バーのExtensionsアイコン）から，markdown-preview-enhancedを検索してInstallする。

![230602-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/644660/bd9e26df-5567-e869-ca9e-debcdf1a3177.png)

<!--
<img width="1245" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/644660/4c8af6e7-855f-77aa-4c6d-bc863cbdc405.png">
-->


#### Packageの設定
メニューのCode>Preference>Settings （または左バーの設定アイコン）タブを開き，markdown preview enhancedの設定項目からEnable Script Executionを有効にする。これによりスクリプトの実行が可能になる。
![230602-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/644660/0ec03f05-9beb-f231-0a50-0d88d5f81e79.png)


以上で設定は完了。

# 書き方
Markdown文書の書き方については、[Markdown記法 サンプル集](https://qiita.com/tbpgr/items/989c6badefff69377da7)などを参考に。
Atomエディタのウィンドウ右下の文書タイプがPlain textになっていたら、これをGitHub Markdownにしておこう。WindowメニューからMarkdown Preview Enhanced > Toggle preview するとウィンドウ右側にリアルタイムのプレビュー画面が表示される。

数式を書くには

~~~
$\alpha_a + \beta^{2x} = \frac{\sqrt{2}}{t}$
~~~
のようにtex記法を使えば、
$\alpha_a + \beta^{2x} = \frac{\sqrt{2}}{t}$
のように出力される。

グラフはgnuplotの場合、

    ~~~gnuplot {cmd=true output="html"}
    set terminal svg
    plot sin(x)
    ~~~
のようにスクリプトを入力するとグラフが出力される。編集中に`Control + Shift + Enter`するとスクリプトが実行されてグラフが更新される。プレビューにスクリプトを出したくない（出力グラフのみ表示）ときは、オプションに`hide=true`を追加する。

matplotlibを使う場合には

    ```python {cmd=true matplotlib=true}
    import matplotlib.pyplot as plt
    plt.plot([1,2,3, 4])
    plt.show() # show figure   
    ```
のように書く。


あとはPDFなりhtmlなりで書き出してやればよい。例えばこんな感じのが、たった数分で書けてしまう。後から修正も非常に簡単。
↓↓↓↓↓↓↓↓↓↓
![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/644660/6bf13767-884d-354b-163b-5ac8986338c6.png)

# まとめ
文書、数式、グラフがMarkdownファイル内で完結するので、ちょっとした資料やレポート作成に便利。後になってプロットを再利用したいときに、グラフの元ファイルが行方不明ということにもならない。A4用紙へのプリントアウトを想定する場合は、少しCSSを調整した方が見栄えがよいと思う。

matplotlibでlatex表記を使うとレイアウトが崩れることがあった。原因は調査中。

latexエラーの回避や、印刷向けCSSなどの情報があればぜひコメントください。