HTML ファイルだけで Markdown を Wiki 風に表示できる「MDWiki」を試してみた

HTML ファイル1つだけで Markdown ファイルをパースして表示してくれる、MDWiki というツールを試してみた。

Markdown ファイルをパースして HTML 表示してくれるツールというと GitBook などがあるが、HTML ファイル1つだけという最強の手軽さが売り。早速試してみよう。

目次

ダウンロードから事始め

ココから MDWiki をダウンロードする。本記事執筆時点では v0.6.2 が最新版だったので、mdwiki-0.6.2.zip をダウンロードした。

Zip ファイルを解凍するといくつかファイルが見えるが、重要なのは以下の3つ。

基本は mdwiki.html の1ファイルだけあればよく、あとはページを構成する Markdown ファイルが同ディレクトリに置いてあればオフラインでも動作する。

というワケで試しにトップページを作ってみよう。

index.md を作って中身を適当にマークアップし、mdwiki.html を開く。Firefox の場合はそのままで良いが、Chrome の場合は --allow-file-access-from-files オプションを付与して Chrome を開いておかないと、ローカルファイルが読み込めない。簡易サーバを立てて運用すれば Chrome も起動オプションは不要。なお、IE は対応していないのであしからず。

mdwiki.html を開くと、index.md の内容がパースされ、HTML として表示されるのが分かるはずだ。

別の Markdown ファイルへリンクする

index.md の他に test.md を作り、そちらにリンクしてみる。

<!-- index.md -->

[test ページに飛ぶ](test.md)

Markdown のリンク記法で、.md ファイルを直接指定すれば良いだけ。

Bootstrap Alerts を利用する

MDWiki には Gimmicks と呼ばれる拡張機能が含まれており、より色々な表現ができるようになっている。

まずは Bootstrap 組み込みの Alerts 表示を簡易的に利用できる Alerts 機能を使ってみよう。

使い方は簡単で、段落を特定の文言から始めるだけ。

<!-- 以下は黄色の Alerts (Warning) になる -->

Attention: 注意です。

Warning! 注意です。

<!-- 以下は水色の Alerts (Info) になる -->

Note: ノートです。

<!-- 以下は緑色の Alerts (Success) になる -->

Hint: ヒントです。

Tip: ヒントです。

warning・attention・note・hint・tip など特定の文言 (大文字・小文字は区別しない) に、コロン : かビックリマーク ! のいずれかを隣接させて行を開始すると、.alert で囲まれる、という仕組み。

他にも yUML を利用して UML 図が書けたりと高機能。詳細は公式を参照のこと。

以上。書いた Markdown をとりあえず読みやすくしたいのであれば、とても手軽に使えるのでオススメだ。