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

  • 43
    いいね
  • 0
    コメント

はじめに

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

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

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

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

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

VS Code 0.10.13の新機能(変更点)
ついに日本語化されました :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
  4. 2.jpg
  5. 3.jpg
  6. 4.jpg
  7. 5.jpg
  8. 6.jpg
  9. 7.jpg
  10. 8.jpg
  11. 9.jpg
  12. 10.png

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

試しにMarkdownを書いてみる。

11.png
とりあえず適当に書きまして~(ちなみに中身はこれです)
12.png
適当に保存しましてー
13.png
Ctrl+KしてそれからVを押すとプレビューが出ます。

不満な点

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

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

白っぽい背景にする

Ctrl+Shift+Pと押すと

14.png

こんな画面になります。いろいろ便利なので覚えましょう。ちなみにAtomやSublimeTextといった最近のテキストエディタはどれもこのショートカットが重要です。
15.png
テーマと打ちまして~
16.png
矢印キーで選択してEnterで確定します。

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

17.png

「ファイル(File)」→「基本設定(Preferences)」→「ユーザー設定(User Settings)」と開きましてー
18.jpg

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

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

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

IPAフォントは
IPAexフォント Ver.003.01(IPAexFont Ver.003.01) | IPAexフォント/IPAフォント
から落として使っていますが、入れてなくてもMeiryoを使うのでそれっぽくなると思います(未検証)。

cf.)Visual Studio Code でConsolasに含まれない文字をメイリオにする方法のメモ

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

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

image

Windows環境で Visual Studio Codeの丸パクリで申し訳ありませんが記事を要約します。

github.cssをDLして解凍(展開)し、
C:\Users\[ユーザー名]\.vscode

に配置します。

次にgithub.cssをカスタマイズします。user.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に追記して

{
    //-------- 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

いいね。

プロ生ちゃんを召喚する

Visual Studio Code(Ver. 0.5.0以降)でプロ生ちゃんを召喚する方法(※Ver. 0.10.8以降での方法を追加しました) | Chronoir.net

./Microsoft VS Code Insiders/resources/app/out/vs/workbench
に(Linuxなら/usr/share/code-insiders/resources/app/out/vs/workbench)workbench.main.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

召喚できます。

cf.)Visual Studio Codeのエディタ色を変える

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

VisualStudioCodeでSublimeライクなショートカットの設定

を参考にしました。

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

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)対応版
これを落として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の方は1回も使ったこと無いのでわかりません。
  5. 7-zipで解凍
  6. msys2_shell.cmdをダブルクリック、Close Windowと言われたらばってんを押して閉じる
  7. 再びmsys2_shell.cmdをダブルクリック、pacman -Syuuと打ち実行、また閉じる
  8. 再びmsys2_shell.cmdをダブルクリック、pacman -S patchと打ち実行、また閉じる
  9. msys2_shell.batを起動するとpatchコマンドが使える

node.jsを導入する

OS
Windows nodistでNode.jsをバージョン管理
Mac nodebrewでNode.jsをバージョン管理 - Node.jsとRubyの環境構築(2)
Linux Ubuntu でapt を使用してNode.js をインストールする3 つの方法(Ubuntu 15.04, Ubuntu 14.04.2 LTS)#NVM を使用してインストールする

これ見て入れてくだい。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

やったぜ!

作業過程比較

はじめ
13.png
プロ生ちゃんを召喚後
20.png
mathjax導入

21.png

リンク