カンテラの光の下で

dNaga392's memorandom

【markdown-it】markdownをパースするHTMLを作ってみた

markdown markdown-it

要点

動機

これまで、 markdown ファイルは markdown viewer （Firefox Add-on）を使って表示していたのだが、 他人に見せるときには必ずしもそのアドオンがあるわけでなく、生のmarkdownが表示されることがあった。

そこで、markdownを表示するHTMLを作ってみることにした。

方法

方法は次の手順に分けて対応した。

  1. markdown を読み込む
  2. markdown をパースする

1. markdown を読み込む

markdown の読み込みには、Fetch API を使った。

developer.mozilla.org

Web素人なため、やりたいことがうまく説明できずたどり着くまでに時間がかかったが、 Fetch API により、同じフォルダにある markdown を読むことができた。

fetch('./index.md')
  .then(response => {
    return response.text();
  })
  .then(body => {
     document.body.innerHTML = body;
  });

2. markdown をパースする

markdown のパースには、marked と markdown-it の2つのライブラリが考えられた。

marked を先に知っていたので、まずはこちらでと考えていたが、 markdown-it が拡張性に富んでいるの点と、実際に使っていてオススメだという周囲の助言があったので、markdown-it を採用した。

fetch('./index.md')
  .then(response => {
    return response.text();
  })
  .then(body => {
     var md = window.markdownit();
     document.body.innerHTML = md.render(body);
  });

ライブラリは、環境構築を極力なくすため、 cdnjs から利用することにした。

<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/8.4.1/markdown-it.min.js"></script>

これでもそこそこパースできたが、タイトルがファイル名となってしまいかっこ悪かった。

動機の原点である markdown viewer では、最初のヘッダーがタイトルになっていたので、 これを実現することにした。

実現には、作者 Keith L Robertson 氏のリポジトリを参考とした。

github.com

結果

f:id:dNaga392:20180320011038p:plain

簡単な markdown を HTML に表示することができた。

拙い出来ではあるが、githubに公開した（https://github.com/dNaga392/md-index）。 興味があれば、参考にしたりマサカリ投げていただきたい。

参考