VisualStudioCodeで最速で俺流Markdown編集環境を構築する

# 注意

**VSCodeのMarkdown周りはこの記事を書いたときから大きく変わっています**。パーサーが[Markdown-it](https://github.com/markdown-it/markdown-it)に変わりました。

[Visual Studio Code July 2017](https://code.visualstudio.com/updates/v1_15#_languages)

をみると大きく変わっていることが実感できると思います。Previewに対してのpluginが作れるようになり

- [mjbvz/vscode-github-markdown-preview-style: VS Code extension that changes the built-in markdown preview to match Github's styling](https://github.com/mjbvz/vscode-github-markdown-preview-style)
- [mjbvz/vscode-markdown-emoji: VS Code extension that adds support for syntax to the built-in markdown preview](https://github.com/mjbvz/vscode-markdown-emoji)
- [Visual Studio CodeのMarkdown Previewに脚注記法を対応させた話 - ただの風邪。](http://caughtacold.hatenablog.com/entry/2017/06/28/174103)

のように誰でもmarkdown-it pluginを利用したVisual Studio Code Markdown Preview Pluginを作れるようになりました。

# はじめに

markdownを書く際、まあメモ帳でも書けるといえば書けるのだが、プレビューしながら書きたいし、syntaxhighlight(色分け)もしてほしい。

これまでSublime Text 3を使っていたのだが、プレビューしながら書くにはブラウザも立ち上げないといけなくてなんか嫌だった。というわけでVisualStudioCodeを使う。

ちなみにこの記事はWindows向けに書いています。ショートカットキー(key bindings)以外はだいたい同じはずだけど。

# まずはVisualStudioCodeをインストールする

~~編集現在、安定版最新は0.10.11だ。じゃあそれを使うか・・・と思ったんだが~~

>~~[VS Code 0.10.13の新機能（変更点）](http://qiita.com/YuichiNukiyama/items/b77a4075f8ee980c3abe)~~
~~ついに日本語化されました :smile: 。英語アレルギーの方がいても、これで推進可能ですね :bowtie:!~~

~~まじか。というわけでstable(安定)版ではなくinsiders版を入れる。~~

**追記(2016/04/15):Version 1.0.0出ましたね。**

1. ~~https://code.visualstudio.com/Download#insiders~~  
https://code.visualstudio.com/Download  
にアクセスする
2. ダウンロードする。
3. ![1.jpg](https://qiita-image-store.s3.amazonaws.com/0/94177/a5fa81d6-c249-4d92-6c8b-66bf092eb217.jpeg)
4. ![2.jpg](https://qiita-image-store.s3.amazonaws.com/0/94177/78537737-3bc6-1199-5069-ef611d3290f3.jpeg)
5. ![3.jpg](https://qiita-image-store.s3.amazonaws.com/0/94177/26ebbee8-fa05-1030-e755-3ba879f952f7.jpeg)
6. ![4.jpg](https://qiita-image-store.s3.amazonaws.com/0/94177/1dfdb431-d07f-ed0b-a4dd-abb8f7ea096f.jpeg)
7. ![5.jpg](https://qiita-image-store.s3.amazonaws.com/0/94177/6fddc8a5-89bf-85eb-46e0-033ea7e7c508.jpeg)
8. ![6.jpg](https://qiita-image-store.s3.amazonaws.com/0/94177/6a6540ac-5558-16ac-e027-3d80b0f9352a.jpeg)
9. ![7.jpg](https://qiita-image-store.s3.amazonaws.com/0/94177/409b7931-8b2d-dd34-f36f-4249d2be4161.jpeg)
10. ![8.jpg](https://qiita-image-store.s3.amazonaws.com/0/94177/1050ce9a-c867-7463-916a-b0ba248e3199.jpeg)
11. ![9.jpg](https://qiita-image-store.s3.amazonaws.com/0/94177/364940a9-f6ff-de31-167e-a7738dde2e9e.jpeg)
12. ![10.png](https://qiita-image-store.s3.amazonaws.com/0/94177/54795fc4-f27b-9c9d-b7d0-e3e55c3d70f1.png)

インストールできた。メニューとかもちゃんと日本語だね。

# 試しにMarkdownを書いてみる。

![11.png](https://qiita-image-store.s3.amazonaws.com/0/94177/2c8f22ac-0483-fb6d-3c78-3ea724c240a0.png)
とりあえず適当に書きまして～(ちなみに中身は[これ](http://qiita.com/yumetodo/items/600ca0df422010cbc4c1)です)
![12.png](https://qiita-image-store.s3.amazonaws.com/0/94177/6d6d9008-25bb-912f-ef46-c2ea3420e28c.png)
適当に保存しましてー
![13.png](https://qiita-image-store.s3.amazonaws.com/0/94177/56a5387a-3cbe-38ba-a0ae-54e2f7d3c3cf.png)
<kbd>Ctrl</kbd>+<kbd>K</kbd>してそれから<kbd>V</kbd>を押すとプレビューが出ます。

# 不満な点
- Tex形式の数式が使えない
- フォントが中華フォントでなんか違和感ある
- GitHubとおなじようなデザインにしたい
- 私は白っぽい背景のほうが好きだ
- <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>↑</kbd>/<kbd>↓</kbd>で行移動できない
- プロ生ちゃんがいない
- ショートカットキーで行選択出来ない(<kbd>Ctrl</kbd>+<kbd>L</kbd>とか)
- ~~<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>``で出すコマンドパレットまで日本語化されたせいで入力が面倒~~

~~最後のはちょっとどうにもならなそう。~~公式で更新入りました

# 白っぽい背景にする

<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>と押すと

![14.png](https://qiita-image-store.s3.amazonaws.com/0/94177/7b4e54d0-6d5c-48c7-5624-9ede104bc8c3.png)

こんな画面になります。いろいろ便利なので覚えましょう。ちなみにAtomやSublimeTextといった最近のテキストエディタはどれもこのショートカットが重要です。
![15.png](https://qiita-image-store.s3.amazonaws.com/0/94177/d70049f8-06a4-b736-13a9-a2ce9fe4eb54.png)
``テーマ``と打ちまして～
![16.png](https://qiita-image-store.s3.amazonaws.com/0/94177/c49302e5-1345-6847-cfba-98479c267a32.png)
矢印キーで選択して<kbd>Enter</kbd>で確定します。

# 編集画面のフォントとかを設定する

![17.png](https://qiita-image-store.s3.amazonaws.com/0/94177/2c832514-8d5a-bc0c-7f6a-c84ece769529.png)

「ファイル(File)」→「基本設定(Preferences)」→「ユーザー設定(User Settings)」と開きましてー
![18.jpg](https://qiita-image-store.s3.amazonaws.com/0/94177/4be78478-bedf-c3be-fa14-ee799e19fb69.jpeg)

```json:setting.json
// 既定の設定を上書きするには、このファイル内に設定を挿入します
{
    // Controls the font family.
    "editor.fontFamily": "consolas,'IPAexゴシック',Meiryo",
    // ウィンドウ幅に合わせて折り返し
    "editor.wrappingColumn": 0,
    // 半角スペースやタブの表示
    "editor.renderWhitespace": true
}
```

~~そういえばなんでjsonなのにコメント書けるんだろう~~

こんなふうに設定します。<kbd>Ctrl</kbd>+<kbd>S</kbd>での保存をお忘れなく。保存した時点で再起動不要で反映されます。

IPAフォントは
[IPAexフォント Ver.003.01(IPAexFont Ver.003.01) | IPAexフォント/IPAフォント](http://ipafont.ipa.go.jp/node26#ja)
から落として使っていますが、入れてなくても``Meiryo``を使うのでそれっぽくなると思います(未検証)。

cf.)[Visual Studio Code でConsolasに含まれない文字をメイリオにする方法のメモ](http://qiita.com/minfuk/items/c4b7caea617a1c3bdc3e)

# MarkdownのPreview画面をどうにかする

**注意：2016/9/11現在、私の手元ではこの方法ではものすごく中途半端にCSSが適用されます**

![image](https://qiita-image-store.s3.amazonaws.com/0/94177/6c0dc394-893c-b493-c2f8-1e0cc5063f63.png)


[Windows環境で Visual Studio Code](http://qiita.com/yuann/items/e4d4581c331aedc6da02)の丸パクリで申し訳ありませんが記事を要約します。

[github.css](https://gist.github.com/andyferra/2554919)をDLして解凍(展開)し、 
``C:\Users\[ユーザー名]\.vscode``  
に配置します。

次に``github.css``をカスタマイズします。``user.css``を作成し  

```css:user.css
* {
  font-family: "Meiryo";
}

code, code span {
  font-family: "consolas,'IPAexゴシック',Meiryo";
}
body {
  padding-top: 0px;
}

h1 {
  margin-top: 0px;
}

li, li ul {
  margin-top: 0px;
  margin-bottom: 0px;
}

hr {
  border: 1px solid;
  height: 0;
}
```

のように書いて保存します。

最後に先の``settings.json``に追記して

```yaml
{
    //-------- Markdown preview configuration --------
    // A list of URLs or local paths to CSS style sheets to use from the markdown preview.
    "markdown.styles": [
        "'C:/Users/j.pierreno/.vscode/github.css'",
        "'C:/Users/j.pierreno/.vscode/user.css'"
    ],
}
```

のように書きます(パスは読み替えてください)

![19.jpg](https://qiita-image-store.s3.amazonaws.com/0/94177/6cf518c1-e4fa-a16c-4c82-9e9b3c955477.jpeg)

いいね。

# プロ生ちゃんを召喚する

[Visual Studio Code（Ver. 0.5.0以降）でプロ生ちゃんを召喚する方法（※Ver. 0.10.8以降での方法を追加しました） | Chronoir.net](http://chronoir.net/visual-studio-code-theme-v050/)

``./Microsoft VS Code Insiders/resources/app/out/vs/workbench``
に(Linuxなら``/usr/share/code-insiders/resources/app/out/vs/workbench``)``workbench.main.css``がありましてー

```css
.monaco-editor.vs,.monaco-editor.vs .zone-widget .monaco-editor,.monaco-editor.vs .lines-content.monaco-editor-background,.monaco-editor.vs-dark,.monaco-editor.vs-dark .zone-widget .monaco-editor,.monaco-editor.vs-dark .lines-content.monaco-editor-background,.monaco-editor.hc-black,.monaco-editor.hc-black .zone-widget .monaco-editor,.monaco-editor.hc-black .lines-content.monaco-editor-background{color:#888;background:#000000;background:url( 'http://pronama.jp/code/sd.png') no-repeat;background-position: right bottom;}
```

と書き足すと
![20.png](https://qiita-image-store.s3.amazonaws.com/0/94177/0555826f-ff6e-a364-272f-1c2f816a6ef5.png)

召喚できます。

cf.)[Visual Studio Codeのエディタ色を変える](http://qiita.com/kagerou_ts/items/2c45e2c6f807bb9f5324)

# ショートカットキー(Key Bindings)をカスタマイズする

[VisualStudioCodeでSublimeライクなショートカットの設定](http://qiita.com/GENYA/items/2563bafe12ff98791ea1)

を参考にしました。

「ファイル」→「基本設定」→「キーボード　ショートカット」

```json:keybindings.json
// 既定値を上書きするには、このファイル内にキー バインドを挿入します
[
    // ブロックコメントの追加
    { "key": "shift+ctrl+/",           "command": "editor.action.blockComment",
                                    "when": "editorTextFocus" }, 

    // 行の移動下方向
    { "key": "shift+ctrl+down",        "command": "editor.action.moveLinesDownAction",
                                    "when": "editorTextFocus" },
    // 行の移動上方向
    { "key": "shift+ctrl+up",          "command": "editor.action.moveLinesUpAction",
                                    "when": "editorTextFocus" },

    // 選択テキストで検索して全ての対象の末尾にマルチカーソル             
    { "key": "shift+ctrl+g",           "command": "editor.action.selectHighlights",
                                    "when": "editorTextFocus" },
    // コンテキストメニュー表示
    { "key": "shift+ctrl+enter",       "command": "editor.action.showContextMenu",
                                    "when": "editorTextFocus" } 
]
```

# Tex形式の数式をちゃんと表示したい

プラグインを入れるだけになったっぽいです

VSCodeのMarkdownで数式を表示する - Qiita
http://qiita.com/kgoto/items/2452b6dbaed5b3f7df78#_reference-754e3ef857ae77f03e25

# [過去のやり方]Tex形式の数式をちゃんと表示したい(PC中級者向け)

なんで中級者向けかというと、patchコマンドを使うのですが、Windowsには標準でpatchコマンドが無いからですね。Windowsは初心者向けでは無いということですね！(違)

## 手っ取り早くpatchコマンドを手に入れる
[patch.exe ユーザーアカウント制御(UAC)対応版](http://blogs.osdn.jp/programming/windows/2015/01/13/patch.html)
これを落としてPATHの通ったところに入れるのがいいと思います。

## unix環境を再現すればpatchも手に入るやん
可能な限り控えめにいって``cmd.exe``は糞なのでこの際別のshellを使おうという感じです。

1. 7-Zipを落とす  
https://sevenzip.osdn.jp/  
より64bit版もしくは32bit版を  
既に入っている人も、2015/11/19に随分久しぶりに最新版が出たのでバージョンを上げるといいです
2. 7zipをインストール  
ダブルクリックして実行すればいいです。
3. msys2を落とす  
4. 
http://sourceforge.net/projects/msys2/files/Base/  
よりお使いのアーキテクチャ(おそらくはx86_64)をクリックしmsys2-base-[アーキテクチャ]-[日付].tar.xz
を。exeの方は１回も使ったこと無いのでわかりません。
4. 7-zipで解凍
5. ``msys2_shell.cmd``をダブルクリック、``Close Window``と言われたらばってんを押して閉じる
6. 再び``msys2_shell.cmd``をダブルクリック、``pacman -Syuu``と打ち実行、また閉じる
7. 再び``msys2_shell.cmd``をダブルクリック、``pacman -S patch``と打ち実行、また閉じる
8. ``msys2_shell.bat``を起動するとpatchコマンドが使える

## node.jsを導入する
| OS      |                                                                                                                                                                                                                                                                                                                       |
|---------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| Windows | [nodistでNode.jsをバージョン管理](http://qiita.com/satoyan419/items/56e0b5f35912b9374305)                                                                                                                                                                                                                             |
| Mac     | [nodebrewでNode.jsをバージョン管理 - Node.jsとRubyの環境構築(2)](http://qiita.com/satoyan419/items/693a84e26a8ad2f0e29e)                                                                                                                                                                                              |
| Linux   | [Ubuntu でapt を使用してNode.js をインストールする3 つの方法(Ubuntu 15.04, Ubuntu 14.04.2 LTS)#NVM を使用してインストールする](http://qiita.com/TsutomuNakamura/items/7a8362efefde6bc3c68b#nvm-%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B) |

これ見て入れてくだい。v4系を入れればいいと思います。

## js-beautify 導入

```
npm install js-beautify -g
```

## patchする

``./Microsoft VS Code/resources/app/out/vs/languages/markdown/common``(Linuxでは``/usr/share/code-insiders/resources/app/out/vs/languages/markdown/common``)に移動

https://gist.github.com/yumetodo/e961b0768f19a63c7f65d2490aa1c3f2
をzipで落として解凍(展開)、``mathjax.patch``を同じパスに

```
js-beautify markdownWorker.js -o fixed.js
patch fixed.js < mathjax.patch
ren markdownWorker.js markdownWorker0.js
ren fixed.js markdownWorker.js
```

## VS Codeを再起動すると・・・

![21.png](https://qiita-image-store.s3.amazonaws.com/0/94177/d8cdffbb-041c-ebc9-65b0-7f64cd3deb72.png)

やったぜ！

# 作業過程比較

はじめ
![13.png](https://qiita-image-store.s3.amazonaws.com/0/94177/56a5387a-3cbe-38ba-a0ae-54e2f7d3c3cf.png)
プロ生ちゃんを召喚後
![20.png](https://qiita-image-store.s3.amazonaws.com/0/94177/0555826f-ff6e-a364-272f-1c2f816a6ef5.png)
mathjax導入

![21.png](https://qiita-image-store.s3.amazonaws.com/0/94177/d8cdffbb-041c-ebc9-65b0-7f64cd3deb72.png)

# リンク
- [#vscode Visual Studio Code のmarkdownでmathjaxを使えるようにするパッチ（仮）](http://qiita.com/3846masa/items/3c63aef11682fb1957e2)
- [Visual Studio Codeリンク集](http://qiita.com/tukiyo3/items/1a664bf3858e42040488)