秀丸エディタでマークダウンで記載したHTMLプレビューを表示する方法

先日、秀丸エディタにてHTMLプレビューを即時更新で行う方法を説明しました。

　秀丸エディタでHTMLプレビューを表示する方法

今回は、マークダウンでHTMLプレビューを行う方法です。

マークダウンとは

文書を記述するための軽量マークアップ言語のひとつであり、「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML(もしくはHTML)文書へと変換できるフォーマット」として、ジョン・グル―バー(John Gruber)とアーロン・スワーツ(Aaron Swartz)によって考案されたもの。

マークダウンの書き方の例

# 見出し h1　→　<h1>見出し</h1>
## 見出し h2　→　<h2>見出し</h2>
### 見出し h3　→　<h3>見出し</h3>

詳しい書き方につきましては、こちらをご覧ください。

使用するマクロ

HmMarkDownPreview v1.26 【マークダウンのHTMLソースとHTMLビューのライブビュー】というマクロを実行させることによりプレビュー表示させます。

導入方法

1. HmMarkDownPreview v1.26 【マークダウンのHTMLソースとHTMLビューのライブビュー】のページにアクセスし、マクロをダウンロードする。
2. zipファイルを適当なディレクトリに解凍する。
3. 秀丸エディタのメニュー「マクロ(M)」から「マクロ登録(E)」を開く。
4. タイトルに任意の名前をつけ、ファイル名は2.にて解凍したファイル（HmMarkDownPreview.mac）をフルパスで指定する。
5. メニューの「マクロ(M)」に4.にて登録したタイトルが表示されるのでクリックするとプレビュー表示される。

使用方法

マクロを実行すると下記画像のような画面が出てきます。

あとは常時更新されるので、プレビュー画面を見ながらHTMLコードを織り交ぜながら記事を作成していくだけです。

使用した感想

プレビュー画面で使用しているレンダリングエンジンはInternetExplorerでほかのブラウザのものに変更することができないのが残念ですが、マークアップで書いたコードがHTMLソースと表示両方がプレビューできるのでソースのほうをコピーしてブログの投稿に使用できるのがありがたいです。


ブログ記事作成に秀丸エディタを使用している方は、参考にしていただけたら幸いです。