[VSCode] Visual Studio CodeをMarkdownエディタとして使用する

入力とプレビュー

Visual Studio Codeはインストール直後の状態でMarkdownに対応しているため対応不要。

html変換

pandocとVisual Studio Codeのvscode-pandoc拡張機能を使用する。

pandocのインストール・設定

pandocのサイトからpandocをダウンロードしてインストールする。

スタイルシートの設定

github.cssをダウンロードし、~/.pandocにコピーする。その後、github.cssを開き、imageを参照しているURLを変更する。

変更前

h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor {
  background: url("../../images/modules/styleguide/para.png") no-repeat 10px center;
  text-decoration: none; }

～省略～

hr {
  background: transparent url("../../images/modules/pulls/dirty-shade.png") repeat-x 0 0;
  border: 0 none;
  color: #cccccc;
  height: 4px;
  padding: 0; }

変更後

h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor {
  background: url("https://raw.githubusercontent.com/gollum/gollum/master/lib/gollum/public/gollum/images/para.png") no-repeat 10px center;
  text-decoration: none; }

～省略～

hr {
  background: transparent url("https://raw.githubusercontent.com/gollum/gollum/master/lib/gollum/public/gollum/images/dirty-shade.png") repeat-x 0 0;
  border: 0 none;
  color: #cccccc;
  height: 4px;
  padding: 0; }

vscode-pandocのインストール・設定

拡張機能で"pandoc"を検索し、「vscode-pandoc」をインストールする。 インストール後、pandoc.htmlOptStringの設定を変更する。

「ファイル(F)」→「基本設定(P)」→「設定(S)」

{
     "pandoc.htmlOptString": "-s -t html5 -c ~/.pandoc/github.css"
}

使い方

• プレビューは「Ctrl+K V」を押す。
• html変換は「Ctrl+K P」を押した後、コマンドパレットに表示されるリストから、「html Render as html document」を選択する。

参考

• http://qiita.com/griffin_stewie/items/95026360fdfca1bd8e33