大した内容ではないんですが、ググって出てくる回答がイマイチな気がしたので、Pugの改行タグ<br>の話。

これをPugで書きたい。

html
<p class="class">
  pタグです<br>
  pタグです<span>spanタグです</span><br>
  pタグです
</p>

基本的な書き方

pug
p.class pタグです
  br
  | pタグです
  span spanタグです
  br
  | pタグです

なんとなく見づらいし、どこで改行されるのかがわかりづらい。

こうしてみたらどうでしょう。

複数行の文章を書く際は、かならず改行してから「|」で始めるようにします。

pug
p.class
  | pタグです
  br
  | pタグです
  span spanタグです
  br
  | pタグです

少し見やすくなった気がします。

多分これが一番見やすいと思います

<br>タグは普通にそのまま書いちゃいます。

pug
p.class
  | pタグです<br>
  | pタグです
  span spanタグです<br>
  | pタグです

若干アウトローな書き方ではありますが、htmlタグは普通に読み取ってくれるのでこの方法でも動きます。
<br>だけ特別扱いすることになるので、採用するかはお好みですが。
文章が長くなってくると、無駄に行数が増えない点が効いてくるんじゃないかと思います。
見た目も(この場合spanが入ってるので若干見辛いですが)表示に近いため読みやすいのではないかと。
いっそインライン要素はそのままhtmlタグで書いてもいいかもしれないですね。

pug
p.class
  | pタグです<br>
  | pタグです<span>spanタグです</span><br>
  | pタグです

まとめ

まとめるほどの内容でもないんですが、Pugはbrだけなんだかちょっと苦手です。
今回の解決法もあまり推奨できる方法ではない気もしますが、こんなやり方もあるよってことで。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.