HTMLテンプレートのPugを使えば、より効率的なコーディングができるようになります。

今回は、なにげに奥深いプレーンテキストの書き方を調べてみました。

プレーンテキストを書く4つの方法

1. インライン

タグの後ろにスペースを1つ空けて書いた文字はすべてテキストコンテンツになります。

p これは<em>テキスト</em>コンテンツです。
<p>これは<em>テキスト</em>コンテンツです。 </p>

2. リテラルHTML

”<”で始まる行もプレーンテキストとして扱われます。条件付きコメントなどで活躍する書き方です。

Pugの基本的な書き方シリーズ。今回は1行コメント、ブロックコメント、条件付きコメントの書き方です。

3. パイプライン

行頭にパイプライン”|”を付ける方法です。プレーンテキストをパイプラインで連結するイメージですね。タグと混在させることもできます。

p
  | これはテキストコンテンツです。
  | こんな風に書いても改行されず連結されます。
<p>これはテキストコンテンツです。 こんな風に書いても改行されずに連結されます。</p>

4. ブロック

タグの直後にドット”.”を追加すると、インデントしたその下の要素はプレーンテキストになります。scriptを書くときなどに使う書き方です。

script.
  if (usingPug)
    console.log('you are awesome')
  else
    console.log('use pug')
<script>
  if (usingPug)
    console.log('you are awesome')
  else
    console.log('use pug')
</script>

ドット単体でも使えます。

div
  p こんな書き方もできます。
  br
  .
    これはdiv直下に入るテキストです。
<div>
  <p>こんな書き方もできます。<br/>これはdiv直下に入るテキストです。</p></div>

スペース問題

要素間のスペースは除去されることに注意しましょう。

// OK
p I like <em>cucumbers</em> very much.
// NG
p
  | I like
  em cucumbers
  | very much.
<!-- OK-->
<p>I like <em>cucumbers</em> very much.</p>
<!-- NG-->
<p>I like<em>cucumbers</em>very much. 

右が空白の”|”をつなぐと改行されます。

p
  | I like
  |
  em cucumbers
  |
  | very much.
<p>
  I like
  <em>cucumbers</em>
  very much.
</p>

参照:Plain Text – Pug