かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Jade 変数に入れたHTMLをHTMLとして出力する

jadeでhtmlタグを含んだ変数を出力したい時

# jade
- var html = '犯人は<a href="https://twitter.com/intent/user?screen_name=KiKiKi_KiKi">俺</a>だよ!';
p= html
div #{html}

の様に書くと

# HTML
<p>犯人は&lt;a href=&quot;https://twitter.com/intent/user?screen_name=KiKiKi_KiKi&quot;&gt;&lt;/a&gt;だよ!</p>
<div>犯人は&lt;a href=&quot;https://twitter.com/intent/user?screen_name=KiKiKi_KiKi&quot;&gt;&lt;/a&gt;だよ!</div>

の様に文字列として表示されてしまします。

そんな時は、!を使うのです! (天の声)

# jade
- var html = '犯人は<a href="https://twitter.com/intent/user?screen_name=KiKiKi_KiKi">俺</a>だよ!';
p!= html
div !{html}

↓ 出力すると....

# HTML
<P>犯人は<a href="https://twitter.com/intent/user?screen_name=KiKiKi_KiKi"></a>だよ!</P>
<div>犯人は<a href="https://twitter.com/intent/user?screen_name=KiKiKi_KiKi"></a>だよ!</div>

HTMLとして出力されました!

文字の途中に入れたい時は、

# jade
- var html = '<a href="https://twitter.com/intent/user?screen_name=KiKiKi_KiKi">俺</a>';
p
  | 犯人は
  != html
  | だよ!
div 犯人は!{html}だよ!

の様に書けばOK。なのです!

このメモを書いた 犯人はだよ!

追記: Stackoverflowに良い説明がありました。
node.js - Jade: Why && is compiled to &amp; when used in angularjs in Jade template? - Stack Overflow

Using != disables HTML-encoding in attributes.