JavaScript - Markdownパーサーのshowdown.js、markdown-js、markedを簡単比較

主に比較したいこと

使い方
変換結果の見た目の印象
table記法を解釈できるか
コードブロックの解釈

動作確認の前提

MarkdownはQuick Markdown Exampleから一部引用しています
- 使用したテキストはGistに置いておきます
CSSはTwitter Bootstrapを使っています
クライアントで使う場合を想定しています(=node.jsでの使用例ではない)
HTMLはどれも次のコードを基本としています

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <link href="bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div id="content">hoge</div>
        </div>
        <!-- ここは該当ライブラリごとに読み込みjsを変える。以下はmarkedの場合 -->
        <script src="marked.js"></script>
        <!-- ここにライブラリを使うための処理を記述する -->
        <script src="sample.js"></script>
    </body>
</html>

showdown.js

使い方

jsを読み込む

<script src="showdown.js"></script>

変換する

new Showdown.converter().makeHtml(plain_text);

結果

markdown

特徴

イケてる
- 拡張機能がある
- 拡張機能を作れるらしい
- デフォルトで「```」コードブロックに対応している
イケてない
- 可読性が低い(らしい)
- 標準だとtable記法に対応していない
- 「~~~」でのコードブロックに対応していない

拡張を使えばtable記法を使える？

extensionsフォルダにあります。

jsを読み込む

<script src="showdown.js"></script>
<script src="table.js"></script>
<script src="github.js"></script>

変換する

new Showdown.converter({extensions: ['table', 'github']}).makeHtml(plain_text);

READMEには {extensions: 'table'} と文字列渡しになっているけど、配列ですね。
文字列渡しだと落ちます。

結果

markdown

うーん、できない。

markdown-js

使い方

jsを読み込む

<script src="markdown.js"></script>

変換する

markdown.toHTML(plain_text);

結果

markdown

特徴

イケてる
- 可読性が高い(らしい)
- 拡張しやすい(らしい)
- 上記の理由から「showdownよりmarkdown-jsがいい」って人がちらほら
イケてない
- 「```」コードブロックが惜しい
- 標準だとtable記法に対応していない
- 「~~~」でのコードブロックに対応していない

marked

使い方

jsを読み込む

<script src="marked.js"></script>

変換する

marked(plain_text);

結果

markdown

オプション設定

GFM対応にするか、table記法のOn/Offとかを設定できます。

marked.setOptions({
  gfm: true,
  tables: true,
  breaks: false,
  pedantic: false,
  sanitize: true,
  smartLists: true,
  smartypants: false,
  langPrefix: 'language-',
  highlight: function(code, lang) {
    // hogehoge
    return code;
  }
});

詳しくはREADMEを参照。

特徴

イケてる
- デフォルトでtable記法に対応している
- デフォルトでコードブロックに対応している
イケてない
- 今のところ特になし

markedとハイライト系のjsを連携する

オプションのlangPrefixはcodeタグのclassに「{langPrefix}{言語タイプ}」で利用されます。
例えば langPrefix: 'lang-' にしていると、pythonのコードブロックは class="lang-python" になります。

これを利用することで、ハイライト系jsとの連携が簡単にできます。

例としてHIGHLIGHT.JSを利用してみます。

cssやjsを読み込む
- cssはstylesから好きなやつで。

<link rel="stylesheet" href="styles/monokai.css">

<script src="marked.js"></script>
<script src="sample.js"></script>
<script src="highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

変換する

// 言語名がそのままclass名になればいいので、langPrefixは空文字にする
marked.setOptions({
  langPrefix: ''
});
marked(plain_text);

ちなみに、markedのhighlightオプションにはcallbackを渡せます。
こちらでいじることも可能だと思います。

結果

markdown

Twitter Bootstrap当てているのでpreタグの背景色も効いているのはご愛嬌。

結論

簡単に試しただけですが、今のところ個人的にはmarkedがいい感じ。