はじめに
Markdownは基本的な文法を覚えればちょっとした文章を素早くきれいに書く事ができる。
Markdownを記載するエディタの中でもプレビュー機能やPDF,HTMLの出力が容易なVisualStudioCodeを使った方法をまとめる。
VisualStudioCodeのインストールから、Extensionと呼ばれる拡張の追加、HTMLへの出力までを手順に沿ってに記載する。
VisualStudioCodeのインストール
VisualStudioCodeのダウンロードとインストールを行う。
Visual Studio Code – コード エディター | Microsoft Azure
プロキシを経由している場合の設定
インターネット接続にプロキシサーバを経由している環境の場合、このあと紹介するExtensionを導入で自動的にインストールされるchromiumのインストールに失敗する。インストールを正常に完了するために、事前に下記の手順でプロキシの設定を行っておく必要がある。プロキシを使用していない環境の場合は本章はスキップ。
【参考】 Visual Studio Code に Proxy を設定する方法
「Ctrl+,」を押下してSettigs画面を開き、以下キャプチャの赤枠部分（Open Settings(JSON))を押下する。
settings.jsonが開いたら、以下のプロキシサーバの設定を追記する。
ユーザ名とパスワードがない場合は「【ユーザ名】:【パスワード】@ 」部分は不要。
"http.proxy": "http://【ユーザ名】:【パスワード】@ 【プロキシIP】:【ポート番号】/",
"http.proxyStrictSSL": false
#Extensionの追加
インストール直後ではMarkdownを出力する環境が整っていないため、Extensionと呼ばれる追加機能をインストールする必要がある。
今回は、「Markdown PDF」をインストールしてMarkdownの出力まで可能にする。
以下画面キャプチャの赤枠部分をクリックしてExtensionsの画面を開く（Ctrl+Shift+X でも開ける）。
Extensionsの画面が開いたら「Search Extensions in Marketplace」の検索欄に「markdown」と入力して検索。何個目かに出てくるMarkdown PDFをクリックして「install」をクリックする。
Markdownファイルの作成・編集
インストールが完了したらさっそくMarkdownファイルを作成して編集する。マークダウンの拡張子は「.md」。
上記以外のMarkdown記法については以下あたりにまとまっているので参考。
Markdown記法 サンプル集 - Qiita
実際に出力した際にどうなるのかプレビューを確認しながら編集できる。
プレビューを開くにはメニューバーのView→Command Palette（Ctrl+Shift+P でも開ける）をまず選択する。
Command Paletteが開いたら「markdown」と入力後、Markdown:Open Preview to the Sideを選択する。
以下のキャプチャのように右側にMarkdownのプレビューが表示される。
なお、プレビューはCommand Paletteを使わずともショートカットコマンド（Ctrl + K → V）でも開くことができる。
Markdownファイルの出力
記述したMarkdownファイルをhtmlに出力する。前述のCommand Paletteを開き、「Markdown PDF:Export(html)」を選択する。html以外で出力したい場合は任意で他の項目を選択する。
Markdownファイル（.md）ファイルと同じディレクトリにhtmlファイルが出力される。
おまけ SVNにコミットする場合
環境によっては、SVNリポジトリに上記で作成したhtmlファイルを通常通りコミット後、URLで対象ファイルにアクセスした際に生のコードが出てきてしまう。mime-typeを「text/html」で設定することで生のコードではなく、HTMLの整形された状態でファイルを開くことができる。
% svn propset svn:mime-type text/html 【対象ファイル】