あまり新しくないもの

新しさはそんなに求めず、自分のすきなことをやりたい人生だった

JadeでMarkdownを使って快適な生活を送りたい

コーディングをしていて、利用規約みたいにやたら長くてマークアップしていくのがだるい文字列をmarkdownで編集できたら楽になるのになあと考えてました。

そして、そういえばJadeってたしかmarkdown対応してたな?ということに気づいたので早速使ってみた。

markedのインストール

Jadeでmarkdownを使うには、markedsupermaredmarkdown-jsmarkdownのいずれかのモジュールをインストールする必要がある模様。

GitHubと同じ感じでmarkdownできるらしいmarkedを選んでみた。

npm install marked -g

これでインストール完了。

書いてみる

doctype 5
html(lang='ja')
  head
    meta(charset='UTF-8')
    title= markdownのテスト
  body
    :markdown
      # markdownのテスト
      
      テストの文章
    
    h2 通常のjade
    p こちらは通常のjade

こんなかんじでとりあえずindex.jadeを用意。

ポイントは

  • :markdownフィルターでこのブロックがmarkdownであることを宣言して、
  • 其のブロック内は普段通りのmarkdownで記述
  • Jade記法に戻るときはブロックからでるだけ(エディタによっては改行を入れてあげないとカラースキームが正しく適用されない)

という感じです。

いざコンパイル

で、コンパイルしてみると

In order to apply the transform markdown you must install one of "marked","supermarked","markdown-js","markdown"

???

さっき確かに入れたはずなのにおかしいな、と。

で、markedのGithubを見に行ったら、 --saveオプションを付けてインストールするみたいなことが書いてあった。

というわけで、

npm install marked -g--save

こうして、コンパイルしてみたところ、無事成功。

どうやら--saveオプションが必要だったみたいです。

コンパイル結果はこんな感じ。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>markdownのテスト</title>
  </head>
  <body>
    <h1>markdownのテスト</h1>
    <p>テストの文章</p>
    <h2>通常のjade</h2>
    <p>こちらは通常のjade</p>
  </body>
</html>

サイコーな感じですね。

jadeと組み合わせて更に幸せになれそう

なお、Jadeのincludeもつかえるっぽくて、

include /piyoDir/hoge.md

という感じでも良さそうでした。

markdownが使えれば普通のディレクターとかでも文言修正できたりもするので、誤字脱字などで修正が発生しやすく、それでいて確認作業が非常に面倒な利用規約などのながーい単純な文章のマークアップにはピッタリです。

しかも、何かの都合でファイルを分割するなどしても、gruntの機能など組み合わせればJadeのほうの記述はかなりシンプルに出来そうでした。サイコーな感じですね。


[2014/02/04追記]

Jadeの1.1.5系から、includeをするときに明示的にfilterの形式を指定しなければいけなくなった模様です。

include:markdown /piyoDir/hoge.md

でこれまでどおりmarkdown形式でinclude出来る模様。