Pugの大きな特徴の一つは、JavaScriptを使えることです。

Pug内に記述したJavaScriptのコードをHTMLには出力しないで使うこともあれば、そのまま出力できると便利なときもありますね。今回はそんなコードの記述方法についてです。

「-」出力しない

HTMLに出力しないコードを書くときは「-」で始めます。ブロック表記もいけます。

//- Inline
- for (var x = 0; x < 3; x++)
  li item 

//- Block
-
  var list = ["Uno", "Dos", "Tres",
              "Cuatro", "Cinco", "Seis"]
each item in list
   li= item
<li>item</li>
<li>item</li>
<li>item</li>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
<li>Cuatro</li>
<li>Cinco</li>
<li>Seis</li>

「=」出力する(エスケープあり)

処理結果をHTMLに出力するときは「=」で始めます。HTMLエスケープされた結果が出力されます。

「=」を要素の属性としてくっつければ、インラインでコードを記述することもできます。上の例でもさらっと使っていました。

p
  = 'This code is <escaped>!'
p= 'This code is' + ' <escaped>!'
//- "="を忘れると、そのままのテキストとして扱われる
p 'This code is' + ' <escaped>!' 
<p>This code is &lt;escaped&gt;!</p>
<p>This code is &lt;escaped&gt;!</p>
<p>'This code is' + ' <escaped>!'</p>

「!=」エスケープせずに出力する

エスケープしないときは上の「=」の代わりに「!=」を使うだけです。

p!= 'This code is' + ' <strong>not</strong> escaped!'
<p>This code is <strong>not</strong> escaped!</p>

ユーザー入力をエスケープせずに出力させると危険なので、そこだけ注意。

参照:Code – Pug