読者です 読者をやめる 読者になる 読者になる

Knowledge

オープンソースで情報共有のサービス「Knowledge」を作っています。ブログでは、サービスの説明や開発で得た情報などを書いていきます。https://support-project.org/knowledge_info/index

Markdown形式のパース - 「marked.js」

開発メモ

Markdownパーサー

  • 「Knowledge」では、情報登録の際にMarkdown形式で編集出来るようにしています
  • Markdownのパースは、クライアントサイドにて「marked.js」を用いています
  • 開発メモとして「marked.js」の使い方を記載します
    • 利用しているライブラリなど、Tipsを開発メモに書いていこうと思います

ライブラリの取得

  • 「knowledge」の開発において、フロントエンドのライブラリは「bower」を使って管理しています
    • Twitter社が作ったフロントエンド用のパッケージマネージャです。 Java で言う Maven、Node.jsのnpmのようなものです
    • bower.jsonに利用したいライブラリを指定し、bower installのコマンドでライブラリを取得します
      • bower についての詳しい説明は、yo-chan さんの「Bower入門(基礎編)」の記事が参考になります
"marked": "0.3.2"
bower install

Bower入門(基礎編) - from scratch

ライブラリの利用の指定

  • 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をパースして取得しています。