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)
表を作るときにとても便利そうなツールがリリースされていました。