よもやもダンプ

音楽、サッカー、プログラムなどをだらだらと。

Visual Studioでマークダウンをプレビュー表示させながら編集する

GitHubでプログラムを公開し始めると、READMEなどをマークダウンで書くようになりました。
ただのテキストファイルやHTMLに比べて段落分けやシンタックスハイライトなどが分かりやすく簡単に書けますね。マークダウン最高。このブログもマークダウンで書いてます。

ただ、これまではGitHubのページからCreate READMEをしてから、オンラインエディタで編集していましたが、普段使ってるエディタでも編集できた方が楽だと思い少し探してみました。
ここ最近はC#でプログラミングをしているのでVisual Studio(Visual Studio Community 2015)でマークダウンを編集できるようにしてみました。

Markdown Editorの導入

調べてみるとVisual Studio Codeには元からマークダウン編集機能がついてるみたいですが、自分が使っているのはVisual Studio Communityだったので機能が付いてなくて、mdファイルを開いてもただのテキストとして表示されるだけでした。
ただ、拡張機能を追加することでマークダウン編集機能を追加することができます。

Markdown Editor

今回はこの拡張機能を追加しました。上のサイトからダウンロードできます。またVisual Studioの [ツール] - [拡張機能と更新プログラム] を選び、ダイアログの「オンライン」メニューを選択したあと「Markdown Editor」と検索してダウンロードすることもできます。

インストール完了後にVisual Studioを再起動してマークダウンファイルを開くと画面が2分割されコードを編集しながらプレビューを確認できるようになりました。

f:id:RerrahKR:20171005183329p:plain

コード編集ウィンドウで右クリックするとでてくる「Add Custom Style Sheet...」でプレビューのCSSのカスタム設定をすることもできます。

すごく便利ですね!


参考リンク