PugでHTMLタグを含む文字列を変数展開したい

2885 ワード
pug HTML5 HTML5 テキストリンク

#{}ではなく!{}を使う

失敗例

#{}を使うと上手くいかない。

sample.pug
-
  const text = `これは<span class="red">サンプルテキスト</span>です。`

p #{text}

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

sample.html
<p>これは&lt;span class=&quot;red&quot;&gt;サンプルテキスト&lt;/span&gt;です。</p>

#{}記法は特殊文字をエスケープ処理してから出力するため、このような結果になります。

成功例

ここではエスケープせず、HTMLタグとして出力したいので、!{}を使ってエスケープせずに出力させます。

sample.pug
-
  const text = `これは<span class="red">サンプルテキスト</span>です。`

p !{text}
sample.html
<p>これは<span class="red">サンプルテキスト</span>です。</p>

上手くいきました

参考