Pug使用時にHTMLのソースコード上で改行する

2024.09.21

Pugでaタグやspanタグを続けて入力すると、コンパイルしたHTMLのソースコード上だと、改行されずに1行で出力されます。
可読性の問題で、途中で改行させたいということがたまにあるので、対応方法をメモ。

サンプルコード

以下のようにaタグが続く場合で試してみます。
まずは対応前です。

a(href='#') A
a(href='#') B
a(href='#') C
a(href='#') D
a(href='#') E

コンパイルを行うと、以下のように1行で出力されます。

<a href="#">A</a><a href="#">B</a><a href="#">C</a><a href="#">D</a><a href="#">E</a>

ソースコード上で改行を入れたい部分にバーティカルバー(|)を2つ追加すると、改行されるようです。

a(href='#') A
|
|
a(href='#') B
|
|
a(href='#') C
|
|
a(href='#') D
|
|
a(href='#') E

コンパイルを行うと、aタグ毎で改行されました。

<a href="#">A</a>
<a href="#">B</a>
<a href="#">C</a>
<a href="#">D</a>
<a href="#">E</a>

土