javascript のコード中に Markdown をヒアドキュメント風に直書きする方法 #JavaScript

状況

「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"));