Visual Studio CodeのMarkdownプレビューをカスタマイズする

(追記有り： 2016/10/20)

そろそろWindows環境でも文章を書く環境を整えようと思ったのですが、Markdownが快適に書ければ十分かなということでVisual Studio Codeに落ち着きました。
標準でMarkdownのプレビューに対応しているのがありがたいですね。ファイルの拡張子を.mdとすると、プレビューボタンが押せるようになります。
http://changesworlds.com/2015/05/how-to-use-the-visual-studio-code-as-markdown-editor/

標準状態だと見た目がちょっと寂しいので、こちらのブログを参考にしながらCSSのフォント周りを少し修正します。
http://kiyokura.hateblo.jp/entry/2016/04/20/150648

markdown.css の置き場所が変わっているようで、手元のバージョン(1.5.3)ではここに置いてありました。
C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\markdown\media

これを %USERPROFILE%\.vscode にコピーして以下のあたりを書き換えました。

body {
    font-family: "Meiryo";
    font-size: 18px;
    padding-left: 12px;
    line-height: 24px;
}

code {
    font-family: "Source Han Code JP";
    font-size: 16px;
    line-height: 19px;
}

最後に Preference -> User Settings から "markdown.styles" にmarkdown.cssのパスを指定しておしまいです。

(おまけ1： MarkdownからWordファイルを出力する)

こちらもありがたいことに先人の知恵がありました。
http://qiita.com/tsujimitsu/items/907d7a2fae2057d0fb1f

全ユーザー向けにインストールすれば特にパスを通す必要もなく、こんな感じで使えました。
pandoc input.md -o output.docx

いくつかのファイルで試してみたところ、書式が厳しめに判定されるようですね。

(おまけ2： キーバインドのカスタマイズ)

メニューから「File -> Preferences -> Keyboard Shortcuts」と選択して、keybindings.json に書き換えたいキーバインドを書き込んでいくだけです。
とりあえずカーソルまわりを快適にしたかったので、デフォルト定義からカーソルの上下左右、行頭、行末の移動とBackspace、Deleteあたりをコピーしてきて一段落。

ということで、こんな感じの keybindings.json になりました。

[
// カーソルを右に
{ "key": "ctrl+f",
  "command": "cursorRight",
  "when": "editorTextFocus && !editorReadonly" },
// カーソルを左に
{ "key": "ctrl+b",
  "command": "cursorLeft",
  "when": "editorTextFocus" },
// カーソルを上に
{ "key": "ctrl+p",
  "command": "cursorUp",
  "when": "editorTextFocus" },
// カーソルを下に
{ "key": "ctrl+n",
  "command": "cursorDown",
  "when": "editorTextFocus" },
// カーソルを行頭に
{ "key": "ctrl+a",
  "command": "cursorHome",
  "when": "editorTextFocus && !editorReadonly" },
// カーソルを行末に
{ "key": "ctrl+e",
  "command": "cursorEnd",
  "when": "editorTextFocus" },
// Backspace
{ "key": "ctrl+h",
  "command": "deleteLeft",
  "when": "editorTextFocus && !editorReadonly" },
// Delete
{ "key": "ctrl+d",
  "command": "deleteRight",
  "when": "editorTextFocus && !editorReadonly" }
]

---

(追記： 2016/10/20)

表を作るときにとても便利そうなツールがリリースされていました。

www.nuits.jp