一歩ずつ学ぶ

最終更新日:

Markdown Preview Plusの設定と使い方

Markdown記法で書いた内容をブラウザですぐに確認する方法として 「Markdown Preview Plus」というChromeの拡張機能があります。

ファイルをドラッグアンドドロップするだけで表示してくれて、 便利な拡張機能なので紹介します。

設定方法

★ 「Markdown Preview Plus」で検索すると多分一番上にChromeウェブストアのページが表示されます。

★ Chromeウェブストアから「CHROMEに追加」をクリックしてインストールします。

★ 「設定」⇒ 「拡張機能 」⇒ 「Markdown Preview Plus」⇒ 「ファイルの URL へのアクセスを許可する」 にチェックをいれます。

Markdown Preview Plus 設定

★ インストールするとChromeの右上にMのマークのアイコンが表示されています。

Markdown Preview Plus アイコン

★ Mのマークのアイコンをクリックすると、下図のような画面が表示されますので「Option」をクリック。

Markdown Preview Plus Option

★ Option画面が表示されて、そこでMarkdownからHTMLに変換するファイルの形式(拡張子)を選択できます。 ここでは「.md」と「.mkd」を変換するように設定しています。 自分が普段使っているマークダウンのファイル形式を選択してください。

Markdown Preview Plus 拡張子

★ 他にCSS等の設定もできますので、好きな設定を選んでください。

使用方法

★ 使用方法は簡単です。記述したMarkdownファイルをChromeにドラッグアンドドロップするだけです。 これでHTMLに変換してChromeに表示されます。

★ HTMLを保存する場合は、Mのマークのアイコンをクリックして、 「Export To HTML」をクリックします。

Markdown Preview Plus HTML

「Markdown Preview Plus」のメリットはMarkdown専用のエディタを使わなくても、 自分が普段使い慣れているエディタでMarkdownが記述できるところです。

「エディタで記述」⇒ 「ブラウザをF5キーで更新して確認」 この流れを繰り返して記述していきます。

私の場合はMarkdown用のエディタとして「Mery」というテキストエディタを使用しています。 「Mery」に興味のある方はこちらの記事も参考にしてください。 (参考記事: Markdown用エディタとしてMeryのアウトライン機能が便利

Markdown Preview Plusが文字化けする場合は

ファイルをドラッグアンドドロップしても文字化けする場合があります。 その時は、「Chromeの設定」⇒ 「ツール」⇒ 「エンコード」から文字コードを選択すれば正常に表示されます。

Markdown Preview Plus 文字化け
Markdown Preview Plus 文字化け

↑ PAGE TOP