状況
「Web サーバなしで Markdown を描画し、かつヒアドキュメントのように記述する」機会があったので、備忘録としてポストします。
準備
以下のファイルを、https://github.com/chjj/marked よりダウンロードしておきます。
- marked.min.js ： Markdown で書かれたテキストを、HTML に変換するライブラリです。
ポイント
ポイントは md.js に書かれている Markdown テキストを無名関数にコメントとして記述することです。
実行時には、
- 無名関数は宣言完了と同時(?)に処理される
- 実行時に関数全体を文字列にする
- 関数全体を表す文字列から、Markdown 部のみを抽出する
無名関数のまま使えば、HTML ファイルにインラインで記述することもできます。
サンプルコード
test.html
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="marked.min.js"></script>
<script src="md.js"></script>
</head>
<body>
<script>
document.write(marked(doc));
</script>
</body>
</html>
md.js
var doc =(function(){
/*
# 表題
テスト Markdown ドキュメント
## サマリ
- 良いところ
- 悪いところ
## 良いところ
- 記述が明瞭
- HTML コンバータが豊富で、リッチな描画が可能
## 悪いところ
- コンバータがないとプレビューできない
- 表記法が統一されていない
*/}.toString().match(/[^function\s\(\s\)\s{\s\/\*][\s\S]*[^\s\*\/}]/g).join("\n"));