マークダウンのHTML表示確認にChrome拡張Markdown Preview Plusが便利

随分以前から使っているのですが、Markdown Preview Plus は、マークダウンのHTML表示確認にとても便利な Google Chrome 拡張です。エンジニアやデザイナーの方であれば、テキスト文書はマークダウン形式で書くことも多いかと思います。

Markdown Preview Plus は、マークダウン文書を HTML に変換して、Google Chrome ブラウザで HTML としてプレビュー確認することができます。リアルタイムでHTML表示を確認しながら、マークダウンテキストを編集することが可能です。

— 環境 —
Markdown Preview Plus 0.6.1
Google Chrome Version 58
macOS Sierra 10.12.4

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

まずは、Chrome ウェブストアから Markdown Preview Plus をインストールします。

Markdown Preview Plus の設定

インストール後、まずは設定を行います。

「Allow access to file URLs」にチェック
Chrome 拡張の設定ページ（chrome://extensions/）を開いて、「Allow access to file URLs」にチェックを入れます。

Screen Shot 2017-02-02 at 17.22.32

Chrome のプライベートモードでも利用する場合は、「Allow in incognito」にもチェックする。

Options の設定
次に Options をクリックして Markdown Preview Plus の設定を行います。以下画像が私の設定例です。

Screen Shot 2017-05-18 at 8.47.31

Miscs の「Enable auto-reload」にチェックを入れる。これで、マークダウンのテキストが変更されたら、ブラウザ表示側もすぐに自動リロードされて変更が表示に反映されます。便利です。

Theme の「Default CSS」で Github を選択。これは私が GitHub の README 用にマークダウンを書くことが多いためです。目的に応じて、適切な CSS を選択します。

「Supported file extensions」で、md, MD, markdown, mdown, mkd にチェック。マークダウンとして取り扱う拡張子を選択します。マークダウンっぽい拡張子にチェックしてます。

以上で設定完了です。

マークダウン文書をHTML表示で確認
マークダウン文書をHTMLに変換して表示を確認するには、マークダウン文書を Google Chrome ブラウザにドラッグ・アンド・ドロップするだけでOKです。綺麗にHTMLフォーマットされたマークダウンテキストを確認できるでしょう。

HTML としてコピーする
マークダウンで書いたテキストを HTML に吐き出したい場合は、Chrome の右上部メニューにある Markdown Preview Plus の Chrome 拡張ボタンをクリックします。

Screen Shot 2017-05-18 at 8.28.24

そして「Copy As HTML」ボタンをクリック。これでクリップボードに HTML がコピーされるので、任意のファイル等にペーストすればOKです。

以上 Markdown Preview Plus の紹介でした。マークダウン文書をよく書かれる方は、ぜひお試しください！

私の愛機 Macbook Air は最高です！