JadeでMarkdownを使って快適な生活を送りたい
コーディングをしていて、利用規約みたいにやたら長くてマークアップしていくのがだるい文字列をmarkdownで編集できたら楽になるのになあと考えてました。
そして、そういえばJadeってたしかmarkdown対応してたな?ということに気づいたので早速使ってみた。
markedのインストール
Jadeでmarkdownを使うには、marked
かsupermared
、markdown-js
、markdown
のいずれかのモジュールをインストールする必要がある模様。
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
出来る模様。