Jadeでmarkdownやcoffeescriptを使ったり、カスタム・フィルタ作ったり

混ぜ過ぎ注意

Jadeで色々な記法を使う方法とカスタム・フィルタの作り方。
複数の書き方ができるけど、エディタによっては、シンタックス・ハイライトのされ方が変わったりする。

html

通常のhtmlのタグを書くだけで使える。

block body
  
  div.
    <h1>HTML</h1>
    <p>通常のHTML</p>

markdown

事前に対応モジュール(marked、supermarked、markdown-jsのいずれか)をインストールしておく必要がある。

インストール後、markdownフィルターを使うと使用できる。

block body

  :markdown
    ## Markdown記法
    
    - hoge
    - foo

もしくは、エイリアスの:mdでも大丈夫。

  :md
    ## Markdown記法
    
    - hoge
    - foo

JavaScript

jsフィルターを使う。

  :js
    $(document).on("click","h1",function(){
      console.log('clicked');
    });

もしくはscriptタグ。

  script.
    $(document).on("click","h1",function(){
      console.log('clicked');
    });

coffee-script

事前にcoffee-scriptをインストールしておく必要がある。グローバル・インストールだと認識しないので、プロジェクトにローカル・インストールする。

  :coffeescript

    $(window).on "load" , ->
      console.log "onLoad"

もしくはエイリアスの:coffeeを使う。

  :coffee

    $(window).on "load" , ->
      console.log ":coffee"

css

cssフィルターを使う。

  :css
    body{
      background:#efefef;
    }

もしくはstyleタグの中に書く。

  style.
    body{
      background:red;
    }

あまりhtmlファイル内にcssを書くことないけど、、、

less

こちらも事前にlessをローカルにインストールしておく必要がある。

インストールしたら、lessフィルタを使う。

  :less
    body {
      @link-color : #f00;
      background:#efefef;

      a{
        color:@link-color;
      }
    }

stylus

stylusをローカルにインストールしておく。

stylusフィルターを使うか、

  :stylus
    .container{
      font-size:1.2em;
      
      .some-layout{
        width: 80%;  
      }
    }

もしくは、エイリアスのstylを使う。

  :styl
    color-text = #333;

    .container
      color color-text

cdata

cdataフィルターを使う。

  :cdata
      hoge

カスタム・フィルタ

カスタム・フィルタはfiltersに追加定義するだけで追加できる。
例えばsomeというfilterを作る場合。

  :some
    <div>code</div>

コンパイル時にフィルターを追加する。
下記は、シンプルに文字をリプレイスしてみる例。

var jade = require('jade');
var filters = jade.filters;
filters.some = function (block) {
    return block.replace(/</g,'&lt;')
                .replace(/>/g,'&gt;');
};

下記のように出力される。

<div>code</div>

やはり

混ぜ過ぎ注意。