Windows環境でリアルタイムプレビュー機能付きのMarkdownエディタ環境を作成する方法です。
「シンタックスハイライト」でき「リアルタイムプレビュー」な環境を「VisualStudioCode」を使って作成したいと思います。
早速VSCodeをインストールします。
Microsoftの以下のページから「今すぐはじめる」＞「Visual Studio Code ダウンロード」を押してください。
Visual Studio Code - Visual Studio
次のページで「Windows」を選びます。フラットデザインのボタンがボタンかどうか全くわからないですが赤枠内をクリックしてください。
(中略)
インストールできました。
起動すると以下のようになっていると思います。（ver 1.22.2では）
このままだと何もできないので拡張機能を追加し提起ます。
テキストエディタにも劣る左側の四角いボタンが拡張機能のボタンなので押して拡張機能を探します。
「Marketplace で拡張機能を検索する」の欄に以下の文字列を入力して「インストール」を選んでください。
インストールする拡張機能は以下の通りです。
| 必須 | 名前 | 説明 |
|---|---|---|
| 必須 | Markdown All in One | VSCode の Markdwon基本パック |
| 必須 | Auto-Open Markdown Preview | MDファイルを開くとプレビューが勝手に開くようになる |
| 必須 | markdownlint | 記述がおかしいときに波線でエラー表示してくれる |
| 必須 | Markdown PDF | 内容をPDFにしてくれる機能 |
| 任意 | Material Theme | エディタの色が黒い方が好きな人向け |
| 任意 | Material Icon Theme | デフォルトのダサいアイコンを変更 |
説明不要かと思いますが、検索後に画面右側に出てくる説明の「インストール」という緑色のボタンをクリックすると拡張機能がインストールされます。
次に、「ファイル」 > 「新規ファイル」を選んで新しいファイルを作成します。
次に画面右下の「プレーンテキスト」の文字をクリックして「Markdown」にファイルタイプを切り替えます。
「言語モードのの選択」というダイアログに「Markdown」と入力して候補を選択します。
そうすると勝手にプレビューが開いてMarkdownが編集できるようになります。
また、既存のMDファイルをVSCodeで開いた場合、Markdown編集 + プレビュー状態に勝手に切り替わります。
もし画面が半分にならない場合、Ctrl + ￥ で画面を2分割して、プレビューを表示したい方で、Ctrl + Shift + V を押すとプレビューが表示されます。
PDFの出力方法
Crtl + Shift + P でコマンドパレットを開き、pdfと入力すると「Markdwon PDF: Export」と出てくるのでそれをクリックするとファイルと同じフォルダにPDFになったファイルが出力されます。
エディタの色を変える（Material Theme入れた人）
画面の色を黒くしたい人は、「ファイル」＞「基本設定」＞「配色テーマ」から
「Material Theme」を選んでください。
すると以下のように即座に色が変わると思います。
他にもテーマが入っている OR 拡張機能として配布されているので、配色は好みのものを探してください。
