Markdown形式のパース - 「marked.js」
Markdownパーサー
- 「Knowledge」では、情報登録の際にMarkdown形式で編集出来るようにしています
- Markdownのパースは、クライアントサイドにて「marked.js」を用いています
- 開発メモとして「marked.js」の使い方を記載します
- 利用しているライブラリなど、Tipsを開発メモに書いていこうと思います
ライブラリの取得
- 「knowledge」の開発において、フロントエンドのライブラリは「bower」を使って管理しています
"marked": "0.3.2"
bower install
ライブラリの利用の指定
- bowerで取得したライブラリを読み込む
<script type="text/javascript" src="bower/marked/lib/marked.js"></script>
Markdownのパース
- パースしたいタイミングで、marked() を実行すれば、パース結果のHTMLを取得できます
実行前にmarked.setOptions() でパースのオプション設定ができます
サンプルソース(HTML)
<p>Markdown text</p> <span style="display: none;" id="content_text"> #### テスト - Markdownで記載できる - パース結果は、以下に表示される </span> <p id="content"> <!-- ここにパース結果が表示される --> </p>
$(document).ready(function(){ marked.setOptions({ langPrefix: '', highlight: function(code, lang) { return code; } }); $('#content').html(marked($('#content_text').text())); });
以上により、Markdownから表示するHTMLをパースして取得しています。