pugでオブジェクトや変数に入れた文字列を途中で改行する方法

pugを使ってると「テキストだけ配列にまとめてループで出力したい」ということがよくあります。

しかし、文字列の途中で改行があると「どうやって改行すればいいんだ？」となり、頭を悩ませている人が多いはず。んで調べてもやり方が出てこない…。

というわけで今回はpugで配列や変数に入れた文字列の改行を反映させる方法を紹介します。

pugで変数に入れた文字列を途中で改行する方法
共通のテキストの途中で改行する
まとめ

pugで変数に入れた文字列を途中で改行する方法

以下のように書けばokです。実はめちゃめちゃ簡単でした。

-
  var titles = [
    '記事1のタイトルです。<br>ここで改行します',
    '記事2は<br>ここで改行します',
    '記事3の改行位置は<br>ここです',
  ];
each titles in title
  h2!= title

改行したい位置で<br>を入れ、エスケープなし（!=）で出力するという、ただそれだけの話です。

\nを入れてごにょごにょしたり、PHPのnl2br()的な何かを探す必要は全くありませんでした。頑張ってあれこれやった人、心中お察しします。

pugはデフォルトでタグをエスケープして出力するので<br>を入れても改行できませんが、!=で意図的にエスケープなしで出力できるので、これを使って<br>をそのまま出力し改行するというわけです。

共通のテキストの途中で改行する

「途中まで同じテキストだけど途中からは変数のテキストを入れたい」という場合はエスケープなしのインターポレーションを使って改行を出力しましょう。

  -
    var titles = [
      '記事1のタイトルです。<br>ここで改行します',
      '記事2は<br>ここで改行します',
      '記事3の改行位置は<br>ここです',
    ];
  each title in titles
    h2 タイトル：#!{title}

pugは#{}でインターポレーションが使え、中に変数名を書くことで値を出力できます。

インターポレーションもデフォルトでエスケープされますが、#!{}とすることで意図的にエスケープなしで出力できます。

なお、インターポレーションを使うときはタグの直後に=や!=はつけないことに気をつけましょう。