スポンサーリンク

Markdownが物足りないので、RedClothとkramdownをインストールしてみました

このブログですが、はじめはMarkdownで書いていました。恥ずかしながらMarkdownを知ったのはつい最近のことです。

Macの日記アプリDay Oneを使っていて、便利だと思いつつも文字の装飾が全くできないことが不満でした。しかし、少し調べてみると軽量マークアップ言語のMarkdownに対応していることが分かり、それから使い始めることになりました。

そんなこんなで、このブログもMarkdownで書くことにしました。

しばらくMarkdownを使っていましたが、シンプルが故に痒いところに手が届かないというか、ちょっと凝りたいと思ってもうまくいかないことが多くなりました。もともと、シンプルさがメリットでもあるので、テキスト主体の内容であれば必要十分であり当然といえば当然です。

Markdownの拡張版があることを知る

少し調べるとMarkdownを拡張したものがあることを知りました。

BlueCloth, GFM(GitHub Flavored Markdown)、RDiscount、PHP Markdown Extra、kramdown、等。

また、Markdownではないですが、Textile(RedCloth)、RD(Ruby Document format)、はてな記法、等。

これだけ多岐に拡張されていると、逆にHTMLでいいのでは?と思いますが、同じドメイン・カテゴリで統一されたフォーマットを使うことによる、デザインの統一感そして効率の良さがメリットなのだろうと勝手に解釈しています。

全てを確認したわけではないのですが、面白そうなRedCloth1とkramdown2を使って見ることにしました。

RedClothのサンプル

(上:Redcloth、下:HTML)

属性追加

p(my-class). This is a paragraph that has a class and this *(#special-phrase)emphasized phrase* has an id.

div(myclass#myid). This div has both a CSS class and ID.

<p class="my-class">This is a paragraph that has a class and this <strong id="special-phrase">emphasized phrase</strong> has an id.</p>

<div class="myclass" id="myid">This div has both a <span class="caps">CSS</span> class and ID.</div>

配置調整

p<. align left
p>. align right
p=. centered

<p style="text-align:left;">align left</p>
<p style="text-align:right;">align right</p>
<p style="text-align:center;">centered</p>

インデント

p(. Left pad 1em.
p)). Right pad 2em.
p(). Pad both left and right sides 1em.

<p style="padding-left:1em;">Left pad 1em.</p>
<p style="padding-right:2em;">Right pad 2em.</p>
<p style="padding-left:1em;padding-right:1em;">Pad both left and right sides 1em.</p>

kramdownのサンプル

(上:kramdown、下:HTML)

属性追加(定義すれば文書内で利用可能)

{:refdef: .class title="title"}
paragraph
{: refdef}
pragraph2
{: refdef}

<p class="class" title="title">paragraph</p>
<p class="class" title="title">paragraph2</p>

指定言語でのコードブロック

~~~ ruby
def what?
  42
end
~~~

<div><div class="CodeRay">
  <div class="code"><pre><span class="line-numbers"><a href="#n1" name="n1">1</a></span><span style="color:#080;font-weight:bold">def</span> <span style="color:#06B;font-weight:bold">what?</span>
<span class="line-numbers"><a href="#n2" name="n2">2</a></span>  <span style="color:#00D">42</span>
<span class="line-numbers"><a href="#n3" name="n3">3</a></span><span style="color:#080;font-weight:bold">end</span>
</pre></div>
</div>
</div>

コメントアウト

This is a paragraph
{::comment}
This is a comment which is
completely ignored.
{:/comment}

<p>This is a paragraph
<!-- 
This is a comment which is
completely ignored.
 -->

インストール方法(だけ)です

ちなみに環境は Lion(10.7.5)で、Rubyはデフォルトでインストールされていたものです。

RedCloth

sudo gem install RedCloth

どんなエラーが出力されたかは忘れましたが、とりあえずエラーが出力され失敗しました。調べたところ、CMSのOctopressなるものにRedClothが入っており、Octopressのインストール時に同じような症状が出ていました。解決するにはXcodeのコマンドツールをインストールする必要がありました。

Xcodeのコマンドツールをインストールすると、問題なくRedCloth のインストールが完了しました。

コマンドツールのインストール方法

Xcodeを起動し、Preferences > Downloads > Compomentsタブ > Command Line Toolsの右側にあるInstallをクリックします。

kramdown

(Kramdownでもなく、KramDownでもなく、kramdownだそうです)

sudo gem install kramdown

インストールはできましたが、ログにwarning: conflicting chdir during another chdir block というエラーが出力されました。

/ruby/1.8/rdoc/rdoc.rbの280行と287行で出力されていました。原因を調べたところ stackoverflowにrubyのバージョンが古いからと書かれていました。そして、バージョンを上げるならプリインストールのrubyは残したまま、他へインストールするのが吉と書いてありましたが、問題なく動いているようなので放置しています。Rubyを使ったことがないので・・・

おわりに

どちらも高機能ですので、これ以上を求めるならHTML直書きと変わらなくなるのかなと思います。

RedClothがちょっと苦手だと思ったのが、例えば文書の途中で<code></code>を挿入したいときMarkdownなら何も考えずにBackquoteで囲めばいいのですが、Redclothの場合、Atmarkで囲みさらに半角スペースで文字間を空けないと認識してくれないという点です。文章を空白で区切るわかち書きの言語なら問題ないのでしょうが、区切りのない日本語だとちょっと面倒です、

どちらもPHPStormとSublimeTextで保存時にコンパイルできるように設定可能なので、使い勝手に問題は無いのですが、PHPStormはTextileのシンタックスハイライトに対応していません(たぶん)。SublimeTextは最初からTextileに対応しており、何もせずに装飾されました。シンタックスハイライトはなくても困りませんが、あると見た目と気分的にはいいですよね。

今はkramdownに落ち着いていますが、こうやって書いているとTextileも面白いので交互に試そうかなと思います。と書きつつ、いろいろ調べるうちにLatexでいいかも!とか一瞬思いましたが、キリがないのでしばらくはこのままで・・・


  1. http://redcloth.org/

  2. http://kramdown.rubyforge.org/index.html