search
LoginSignup
5

More than 1 year has passed since last update.

posted at

updated at

Organization

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

状況

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

準備

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

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

ポイント

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

実行時には、

  1. 無名関数は宣言完了と同時(?)に処理される
  2. 実行時に関数全体を文字列にする
  3. 関数全体を表す文字列から、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"));

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
5