PG日誌

各記事はブラウザの横幅を1410px以上にすると2カラムの見出しが表示されます。なるべく横に広げてみてください。

WindowsでMarkdownエディタをセットアップする

Windows環境でリアルタイムプレビュー機能付きのMarkdownエディタ環境を作成する方法です。

「シンタックスハイライト」でき「リアルタイムプレビュー」な環境を「VisualStudioCode」を使って作成したいと思います。

早速VSCodeをインストールします。

Microsoftの以下のページから「今すぐはじめる」>「Visual Studio Code ダウンロード」を押してください。

Visual Studio Code - Visual Studio

次のページで「Windows」を選びます。フラットデザインのボタンがボタンかどうか全くわからないですが赤枠内をクリックしてください。

f:id:Takachan:20180425231812p:plain

(中略)

インストールできました。

起動すると以下のようになっていると思います。(ver 1.22.2では)

f:id:Takachan:20180425231831p:plain

このままだと何もできないので拡張機能を追加し提起ます。

テキストエディタにも劣る左側の四角いボタンが拡張機能のボタンなので押して拡張機能を探します。

f:id:Takachan:20180425232139p:plain

「Marketplace で拡張機能を検索する」の欄に以下の文字列を入力して「インストール」を選んでください。

インストールする拡張機能は以下の通りです。

必須 名前 説明
必須 Markdown All in One VSCode の Markdwon基本パック
必須 Auto-Open Markdown Preview MDファイルを開くとプレビューが勝手に開くようになる
必須 markdownlint 記述がおかしいときに波線でエラー表示してくれる
必須 Markdown PDF 内容をPDFにしてくれる機能
任意 Material Theme エディタの色が黒い方が好きな人向け
任意 Material Icon Theme デフォルトのダサいアイコンを変更

説明不要かと思いますが、検索後に画面右側に出てくる説明の「インストール」という緑色のボタンをクリックすると拡張機能がインストールされます。

f:id:Takachan:20180425232148p:plain

次に、「ファイル」 > 「新規ファイル」を選んで新しいファイルを作成します。

f:id:Takachan:20180425232156p:plain

次に画面右下の「プレーンテキスト」の文字をクリックして「Markdown」にファイルタイプを切り替えます。

f:id:Takachan:20180425232202p:plain

「言語モードのの選択」というダイアログに「Markdown」と入力して候補を選択します。

そうすると勝手にプレビューが開いてMarkdownが編集できるようになります。

また、既存のMDファイルをVSCodeで開いた場合、Markdown編集 + プレビュー状態に勝手に切り替わります。

f:id:Takachan:20180425232427p:plain

もし画面が半分にならない場合、Ctrl + ¥ で画面を2分割して、プレビューを表示したい方で、Ctrl + Shift + V を押すとプレビューが表示されます。

PDFの出力方法

Crtl + Shift + P でコマンドパレットを開き、pdfと入力すると「Markdwon PDF: Export」と出てくるのでそれをクリックするとファイルと同じフォルダにPDFになったファイルが出力されます。

f:id:Takachan:20180425232211p:plain

エディタの色を変える(Material Theme入れた人)

画面の色を黒くしたい人は、「ファイル」>「基本設定」>「配色テーマ」から

f:id:Takachan:20180425232218p:plain

「Material Theme」を選んでください。

f:id:Takachan:20180425232226p:plain

すると以下のように即座に色が変わると思います。

f:id:Takachan:20180425232233p:plain

他にもテーマが入っている OR 拡張機能として配布されているので、配色は好みのものを探してください。