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

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

JavaScript

主に比較したいこと

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

動作確認の前提

  • MarkdownはQuick Markdown Exampleから一部引用しています
    • 使用したテキストはGistに置いておきます
  • CSSTwitter 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を読み込む
<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がいい感じ。