Typescript クイックガイド で、ソースを見たら Markdown で書かれてたのをみて「カッケー」と思ったのと、利用規約やプライバシーポリシーは Github に置くといいよ というのを見て、なら「github に .markdown ファイルを置いてクライアントサイドでスタイリングできたら嬉しいじゃん?」と思いやってみた。

Javascript による markdown パーサいろいろ

上記 Typescript クイックガイド では marked.js が使われているようだが、他にもいろいろある模様。下記にて比較してくださっている。

もともと marked.js を使おうと思ってたし、上記サイトでも問題無さそうだったので、そのままいく。

使い方

marked.js を読み込んだ後、

var formatted = marked(markdown_text)

で、HTML に整形された文字列が返されるというシンプルなもの。(整形オプションがいろいろあるようだが割愛)

Typescript クイックガイドでは、HTML 内に Markdown テキストがベタ書きされていたが、せっかくなので管理がしやすいように外部 Markdown ファイルを読みこむようにしてみた。

```html md_renderer.html
<!DOCTYPE html>

Markdown renderer

```

一番下の <div id="markdown_content" src="./sample.markdown"> の src に読み込む Markdown ファイルを指定するようにした。

bootstrap で見栄えを良くしているが、必須ではない。

こちらが デモ

さすがに描画に少し時間がかかるみたいです。
marked() は非同期版もあるようなので、そちらを使うべきだったかな。

これで、データ(Markdown)とプレゼンテーション部(HTML)を分離できて、なんか良さげな感じがする。

Octopress とか、HTMLを生成しちゃうんじゃなくて、クライアントサイドで 「Markdown を描画する」できると、投稿の手間が減って良いかもですね。

Markdown
HTML5
JavaScript

published

Ads

Read more!

amay077

Microsoft MVP(Xamarin). フルリモートワーカー. Geospatial Mobile app developer. Love C#.

amay077 amay077