疑似ヒアドキュメントを使ったローカルのmdファイルをブラウザで表示する

HeredocForMarkdownというスクリプトを作成してみました。
Javascriptの関数のコメントによる疑似ヒアドキュメントを使って、ローカルのmdファイルをブラウザでHTMLに変換して表示する、というものです。
以下がポイントとなります。

• テキストを独立した複数のファイルで保持する。
• ブラウザでローカルのファイルを扱う。
• ファイル間を移動できる。

mdファイルの形式

読み込めるmdファイルは純粋なMarkdownではなくJavascriptなので、以下のように本文以外に前後に疑似ヒアドキュメントにするための仕掛けが必要です。

MD.set(()=>{/* // magic line

# This is sample1
Click the link [sample2](sample2)
to view another md content.

*/}); // magic line

本文部分だけ抜き出し、Markdownのパーサを通すことで以下のようにHTMLになって表示できます。

<h1>This is sample1</h1>
<p>Click the link <a href="sample2">sample2</a>
to view another md content.</p>

処理の流れ

以下のようになります。

1. scriptタグでmdファイルを動的に読み込み。
2. mdファイル内で関数のコメントで文字列を定義。
3. 文字列をMarkdownのパーサmarkd.parseでHTMLに変換。
4. mdファイル間のリンクはonclickでmdファイルの動的読み込みにする。

参考：Javascriptの疑似ヒアドキュメント

以下の方法があります。

• function(){/*～*/}と関数内にコメントを書いてtoStringで関数定義自体を文字列化して取得する。
  本文以外に関数定義の部分を書かないとならない。
• <script type='text/plain' id='xxx'>～</script>の間に書いてdocument.getElementById('xxx').textContentで内容を取得する。
  HTML内に書く必要がある。外部ファイル指定の場合はtextContentが取得できない。
• バッククォートで挟んだテンプレートリテラルを使う。
  バッククォートを多用するMarkdownと相性が悪い。

外部ファイルでMarkdown形式のファイルを扱いたいので関数のコメントでの疑似ヒアドキュメント一択となりました。

最後に

疑似ヒアドキュメントの使い方や使い道の実験であり、このスクリプト自体はあまり意味はないです。
純粋なmdファイルを扱えれば意味があったかもしれません。