Visual Studio CodeをMarkdownエディタとして利用する方法 #vscode

このblogはMarkdown記法で書いており、エディタはMouを使っていた。Sublime textも試したのだが、それぞれ長所と短所を比較して、最終的にはMouを選択していた。

MouとSublime Textのそれぞれの長所と短所

Mou

  • 長所:リアルタイムにプレビューできる
  • 短所:シンタックスハイライトしない

Sublime Text

  • 長所:シンタックスハイライトする
  • 短所:リアルタイムにプレビューがエディタ内で閉じていない1

リアルタイムプレビューの使い勝手を取って、Mouを使って“いた”が、Visual Studio CodeでMarkdownを表示するとMouとSublime Textの両方の長所を合わせもっていたので、今後はVisual Studio Codeを使っていく予定。

Visual Studio CodeをMarkdownエディタとして利用する方法

Markdown Preview
Open any Markdown file and press ⇧⌘V in the editor to toggle between the code and a preview of the Markdown file. You can view the preview side-by-side with the file you are editing and see changes reflected in real time.
Language Support in Visual Studio Code

拡張子が.mdのファイルをVisual Studio Codeで開き、⇧⌘V(=Shift + Command + V)を実行すると、以下のようにプレビューが表示される。

Preview

このままでは修正できないため、右上にあるSplit Edhitorのアイコンをクリックして、画面を分割する。

Split Editor

分割しただけでは修正できないので、エディタとして使いたい側の分割エリアにフォーカス後、⇧⌘V(=Shift + Command + V)を実行すると、フォーカスさせた側でコードを修正できるようになる(この例では左側)。

Editor and Preview


  1. ブラウザ上でMarkdownがリアルタイムプレビューできるが、エディタ内で閉じれないので微妙に使い勝手が悪かった