2017-06-13

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

投稿:2017-06-13, 更新:%meta.update%, Tag:JavaScript, HTML, Markdown, ヒアドキュメント, 正規表現

状況

「Web サーバなしで Markdown を描画し、かつヒアドキュメントのように記述する」機会があったので、備忘録としてポストします。

準備

以下のファイルを、https://github.com/chjj/marked よりダウンロードしておきます。

  • marked.min.js : Markdown で書かれたテキストを、HTML に変換するライブラリです。

ポイント

ポイントは md.js に書かれている Markdonw テキストを無名関数にコメントとして記述することです。

実行時には、

  1. 無名関数は宣言完了と同時(?)に処理される
  2. 実行時に関数全体を文字列にする
  3. 関数全体を表す文字列から、Markdonw 部のみを抽出する

無名関数のまま使えば、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>
var doc =(function(){
/*
# 表題
テスト Markdown ドキュメント

## サマリ

- 良いところ
- 悪いところ

## 良いところ

- 記述が明瞭
- HTML コンバータが豊富で、リッチな描画が可能

## 悪いところ

- コンバータがないとプレビューできない
- 表記法が統一されていない

*/}.toString().match(/[^function\s\(\s\)\s{\s\/\*][\s\S]*[^\s\*\/}]/g).join("\n"));