pug(Jade)でエスケープせずhtmlタグやscriptをそのまま表示させる方法

pug(旧Jade)でhtmlやscript、styleのサンプルコードを表示させたい場合、<>などをエスケープする必要がある。

たとえば以下のような感じだ。

pre
  code
    | <script>
    | alert('Hello');
    | </script>

これではサンプルコードが変わるたびにいちいちエスケープしてから書き換えなければならないし、そもそもヒューマンリーダブルでない。

ということで、エスケープせずにそのままサンプルコードを貼る方法をまとめる。

そのまま書くとHTMLとして解釈されてしまう

愚直にscriptタグをそのまま書いた場合、HTMLとして解釈させてしまう。

<!-- 変換前: pug -->
pre
  code
    | <script>
    |    alert('a');
    | </script>

<!-- 変換後: html -->
<pre>
  <code>
    <script>
      alert('Hello');
    </script>
  </code>
</pre>

scriptタグが埋め込まれた状態になってしまい、「Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.」のようなscriptタグを入れないでくださいというエラーになってしまう。

かといって毎回エスケープするのは面倒。

インラインや1行だけなら#{}を使う

インラインコードや1行だけのコードなら、#{}を使うことでエスケープしなくてもそのまま表示できる。

p #{'<script>alert(\'1\')</script>'}
//- or
p #{"<script>alert('1')</script>"}
//- or
p #{`<script>alert('1')</script>`}

しかし、複数行になった場合、すべての行にp #{}をつけるのはエスケープする以上に面倒だ。

Filter機能を使う

pugテンプレート内で他の言語を使えるようにするFilter機能がある。そこで「jstransformer-escape-html」を使う。

# jstransformer-escape-htmlをインストールする
$ npm i -D jstransformer-escape-html

pre
  code
    //- jstransformer-escape-htmlのfilter
    :escape-html
      <script>
        alert('Hello');
      </script>

これでエスケープせず、複数行のhtmlタグやscriptタグなどをそのまま表示できる。



以上

written by @bc_rikko