Pugでコンパイル後の内容をコメントアウトする

PugをコンパイルしたHTMLで、一部コードをコメントアウトしたい時に少し迷ったのでメモ。

サンプルコード

以下のような商品リストがあり、商品Bを一時的にコメントアウトしたいとします。

Pug

ul.list
  li.list-item
    a(href="") アイテムA
  li.list-item
    a(href="") アイテムB
  li.list-item
    a(href="") アイテムC

HTML

<ul class="list">
  <li class="list-item"><a href="">アイテムA</a></li>
  <li class="list-item"><a href="">アイテムB</a></li>
  <li class="list-item"><a href="">アイテムC</a></li>
</ul>

コメントアウトを外すのはPugを使用しない環境で行うため、コメントアウトした中身はHTMLタグが入っている必要があります。
コンパイル後も残る記述のコメントアウトで、以下のように記述してみます。

Pug

ul.list
  li.list-item
    a(href="") アイテムA
  //
    li.list-item
      a(href="") アイテムB
  li.list-item
    a(href="") アイテムC

コンパイルを行うと、コメントアウト内はコンパイル前の状態で出力されました。

HTML

<ul class="list">
  <li class="list-item"><a href="">アイテムA</a></li>
  <!--
  li.list-item
    a(href="") アイテムB
  -->
  <li class="list-item"><a href="">アイテムC</a></li>
</ul>

コメントアウト内もコンパイルさせたい場合、Pugで用意されているコメントアウトを使うのではなく、バーティカルバー(|)でコメント開始と終了を記述するとよさそうです。

Pug

ul.list
  li.list-item
    a(href="") アイテムA
  | <!--
  li.list-item
    a(href="") アイテムB
  | -->
  li.list-item
    a(href="") アイテムC

これをコンパイルすると、意図した形でコメントアウトができました。

HTML

<ul class="list">
  <li class="list-item"><a href="">アイテムA</a></li><!--
  <li class="list-item"><a href="">アイテムB</a></li>-->
  <li class="list-item"><a href="">アイテムC</a></li>
</ul>

【参考サイト】

• Plain Text – Pug