markdownのパーサって何がいいのか試してみた

markdownの確認ツールが欲しかったので、Rubyのパーサを試したNMです。

あ、markdownとは、、、「文書を記述するための軽量マークアップ言語のひとつ」by wikipedia です。

今回、検証に使ったパーサは以下。

  • BlueCloth
  • RDiscount
  • Redcarpet
  • Kramdown
  • Maruku

参考 : http://higelog.brassworks.jp/?p=1704

検証は、基本となるmarkdown記法について。http://ja.wikipedia.org/wiki/Markdown

 #### 斜体

 *強調* もしくは _強調_

 #### 太字

 **強い強調** もしくは __強い強調__

 #### コード

 インラインコードは「`some code`」のようにバッククオート(U+0060)で囲む

     1行目
     2行目
     3行目

 #### リスト

 * 順序無しリストのアイテム
    * サブアイテムは4つのスペースでインデントする
 * 順序無しリストの別のアイテム

 1. 順序付きリストのアイテム
 2. 順序付きリストの別のアイテム

 #### 見出し

 # レベル1の見出し

 ## レベル2の見出し

 ### レベル3の見出し

 #### レベル4の見出し

 レベル1の見出し
 ===============

 レベル2の見出し
 ---------------

 #### 引用

 > "このテキストは、HTMLのblockquote要素に囲まれます。
 blockquote要素はreflowableです。テキストを好きなように
 改行することができます。改行したとしても、変換後はひとつの
 blockquote要素として扱われます。"

 #### リンク

 [Opentone](http://www.opentone.co.jp/ "Opentone")

 #### 水平線

 * * *

 ***

 *****

 - - -

 ---------------------------------------

BlueCloth

<h4>斜体</h4>

<p><em>強調</em> もしくは <em>強調</em></p>

<h4>太字</h4>

<p><strong>強い強調</strong> もしくは <strong>強い強調</strong></p>

<h4>コード</h4>

<p>インラインコードは「<code>some code</code>」のようにバッククオート(U+0060)で囲む</p>

<pre><code>1行目
2行目
3行目
</code></pre>

<h4>リスト</h4>

<ul>
<li>順序無しリストのアイテム

<ul>
<li>サブアイテムは4つのスペースでインデントする</li>
</ul>
</li>
<li><p>順序無しリストの別のアイテム</p></li>
<li><p>順序付きリストのアイテム</p></li>
<li>順序付きリストの別のアイテム</li>
</ul>

<h4>見出し</h4>

<h1>レベル1の見出し</h1>

<h2>レベル2の見出し</h2>

<h3>レベル3の見出し</h3>

<h4>レベル4の見出し</h4>

<h1>レベル1の見出し</h1>

<h2>レベル2の見出し</h2>

<h4>引用</h4>

<blockquote><p>"このテキストは、HTMLのblockquote要素に囲まれます。
blockquote要素はreflowableです。テキストを好きなように
改行することができます。改行したとしても、変換後はひとつの
blockquote要素として扱われます。"</p></blockquote>

<h4>リンク</h4>

<p><a href="http://www.opentone.co.jp/" title="Opentone">Opentone</a></p>

<h4>水平線</h4>

<hr>

<hr>

<hr>

<hr>

<hr>

RDiscount

<h4>斜体</h4>

<p><em>強調</em> もしくは <em>強調</em></p>

<h4>太字</h4>

<p><strong>強い強調</strong> もしくは <strong>強い強調</strong></p>

<h4>コード</h4>

<p>インラインコードは「<code>some code</code>」のようにバッククオート(U+0060)で囲む</p>

<pre><code>1行目
2行目
3行目
</code></pre>

<h4>リスト</h4>

<ul>
<li>順序無しリストのアイテム

<ul>
<li>サブアイテムは4つのスペースでインデントする</li>
</ul>
</li>
<li><p>順序無しリストの別のアイテム</p></li>
<li><p>順序付きリストのアイテム</p></li>
<li>順序付きリストの別のアイテム</li>
</ul>

<h4>見出し</h4>

<h1>レベル1の見出し</h1>

<h2>レベル2の見出し</h2>

<h3>レベル3の見出し</h3>

<h4>レベル4の見出し</h4>

<h1>レベル1の見出し</h1>

<h2>レベル2の見出し</h2>

<h4>引用</h4>

<blockquote><p>"このテキストは、HTMLのblockquote要素に囲まれます。
blockquote要素はreflowableです。テキストを好きなように
改行することができます。改行したとしても、変換後はひとつの
blockquote要素として扱われます。"</p></blockquote>

<h4>リンク</h4>

<p><a href="http://www.opentone.co.jp/" title="Opentone">Opentone</a></p>

<h4>水平線</h4>

<hr>

<hr>

<hr>

<hr>

<hr>

Redcarpet

<h4>斜体</h4>

<p><em>強調</em> もしくは <em>強調</em></p>

<h4>太字</h4>

<p><strong>強い強調</strong> もしくは <strong>強い強調</strong></p>

<h4>コード</h4>

<p>インラインコードは「<code>some code</code>」のようにバッククオート(U+0060)で囲む</p>

<pre><code>1行目
2行目
3行目
</code></pre>

<h4>リスト</h4>

<ul>
<li>順序無しリストのアイテム

<ul>
<li>サブアイテムは4つのスペースでインデントする</li>
</ul></li>
<li>順序無しリストの別のアイテム</li>
</ul>

<ol>
<li>順序付きリストのアイテム</li>
<li>順序付きリストの別のアイテム</li>
</ol>

<h4>見出し</h4>

<h1>レベル1の見出し</h1>

<h2>レベル2の見出し</h2>

<h3>レベル3の見出し</h3>

<h4>レベル4の見出し</h4>

<h1>レベル1の見出し</h1>

<h2>レベル2の見出し</h2>

<h4>引用</h4>

<blockquote>
<p>"このテキストは、HTMLのblockquote要素に囲まれます。
blockquote要素はreflowableです。テキストを好きなように
改行することができます。改行したとしても、変換後はひとつの
blockquote要素として扱われます。"</p>
</blockquote>

<h4>リンク</h4>

<p><a href="http://www.opentone.co.jp/" title="Opentone">Opentone</a></p>

<h4>水平線</h4>

<hr>

<hr>

<hr>

<hr>

<hr>

Kramdown

<h4 id="section">斜体</h4>

<p><em>強調</em> もしくは <em>強調</em></p>

<h4 id="section-1">太字</h4>

<p><strong>強い強調</strong> もしくは <strong>強い強調</strong></p>

<h4 id="section-2">コード</h4>

<p>インラインコードは「<code>some code</code>」のようにバッククオート(U+0060)で囲む</p>

<pre><code>1行目
2行目
3行目
</code></pre>

<h4 id="section-3">リスト</h4>

<ul>
  <li>順序無しリストのアイテム
    <ul>
      <li>サブアイテムは4つのスペースでインデントする</li>
    </ul>
  </li>
  <li>順序無しリストの別のアイテム</li>
</ul>

<ol>
  <li>順序付きリストのアイテム</li>
  <li>順序付きリストの別のアイテム</li>
</ol>

<h4 id="section-4">見出し</h4>

<h1 id="section-5">レベル1の見出し</h1>

<h2 id="section-6">レベル2の見出し</h2>

<h3 id="section-7">レベル3の見出し</h3>

<h4 id="section-8">レベル4の見出し</h4>

<h1 id="section-9">レベル1の見出し</h1>

<h2 id="section-10">レベル2の見出し</h2>

<h4 id="section-11">引用</h4>

<blockquote>
  <p>“このテキストは、HTMLのblockquote要素に囲まれます。
blockquote要素はreflowableです。テキストを好きなように
改行することができます。改行したとしても、変換後はひとつの
blockquote要素として扱われます。”</p>
</blockquote>

<h4 id="section-12">リンク</h4>

<p><a href="http://www.opentone.co.jp/" title="Opentone">Opentone</a></p>

<h4 id="section-13">水平線</h4>

<hr>

<hr>

<hr>

<hr>

<hr>

Maruku

<h4 id="">斜体</h4>

<p><em>強調</em> もしくは <em>強調</em></p>

<h4 id="_2">太字</h4>

<p><strong>強い強調</strong> もしくは <strong>強い強調</strong></p>

<h4 id="_3">コード</h4>

<p>インラインコードは「<code>some code</code>」のようにバッククオート(U+0060)で囲む</p>

<pre><code>1行目
2行目
3行目</code></pre>

<h4 id="_4">リスト</h4>

<ul>
<li>順序無しリストのアイテム
<ul>
<li>サブアイテムは4つのスペースでインデントする</li>
</ul>
</li>

<li>順序無しリストの別のアイテム</li>
</ul>

<ol>
<li>順序付きリストのアイテム</li>

<li>順序付きリストの別のアイテム</li>
</ol>

<h4 id="_5">見出し</h4>

<h1 id="1">レベル1の見出し</h1>

<h2 id="2">レベル2の見出し</h2>

<h3 id="3">レベル3の見出し</h3>

<h4 id="4">レベル4の見出し</h4>

<h1 id="1_2">レベル1の見出し</h1>

<h2 id="2_2">レベル2の見出し</h2>

<h4 id="_6">引用</h4>

<blockquote>
<p>“このテキストは、HTMLのblockquote要素に囲まれます。</p>
</blockquote>

<p>blockquote要素はreflowableです。テキストを好きなように 改行することができます。改行したとしても、変換後はひとつの blockquote要素として扱われます。“</p>

<h4 id="_7">リンク</h4>

<p><a href="http://www.opentone.co.jp/" title="Opentone">Opentone</a></p>

<h4 id="_8">水平線</h4>
<hr><hr><hr><hr><hr>

パーサによって、いくつか差異が発生していました。
見た目的な箇所でいうと、、、

リスト

BlueClothRDiscountでは、リストの種類が異なっても、別のリストとは判断していませんでしたが、

  • 順序無しリストのアイテム
    • サブアイテムは4つのスペースでインデントする
  • 順序無しリストの別のアイテム
  • 順序付きリストのアイテム
  • 順序付きリストの別のアイテム

他の、パーサでは、リストを区別していました。

  • 順序無しリストのアイテム
    • サブアイテムは4つのスペースでインデントする
  • 順序無しリストの別のアイテム
  1. 順序付きリストのアイテム
  2. 順序付きリストの別のアイテム

また、BlueClothRDiscountで区別したい場合には、以下のように、コメントなどを挟むと区別してくれました。

 * 順序無しリストのアイテム
    * サブアイテムは4つのスペースでインデントする
 * 順序無しリストの別のアイテム

 <!-- dummy comment line for breaking list -->

 1. 順序付きリストのアイテム
 2. 順序付きリストの別のアイテム

引用

引用時に、
KramdownMarukuでは、引用された内容のダブルコーテションが変換されていた。

Redcarpet

“このテキストは、HTMLのblockquote要素に囲まれます。
blockquote要素はreflowableです。テキストを好きなように
改行することができます。改行したとしても、変換後はひとつの
blockquote要素として扱われます。”

Karmdown

“このテキストは、HTMLのblockquote要素に囲まれます。
blockquote要素はreflowableです。テキストを好きなように
改行することができます。改行したとしても、変換後はひとつの
blockquote要素として扱われます。”

またMarukuでは、「>」を入れた行のみに、引用が適用されていた。

Maruku

“このテキストは、HTMLのblockquote要素に囲まれます。

blockquote要素はreflowableです。テキストを好きなように 改行することができます。改行したとしても、変換後はひとつの blockquote要素として扱われます。“

また、見えない箇所でいうと、KramdownMarukuでは、見出しには動的にidが振られていました。(但し、Marukeは、別途defaultのidを指定しないと正常に振られていない)

というように、パーサによってパース後の結果が異なることが分かります。

では、次回は拡張した記法について試した結果を。