Plain Text

更新日: 2018-09-10

プレーンテキスト

プレーンテキストは、 HTMLをそのまま移動、コピーする必要があるコードや、文字列を言います。
Pugではプレーンテキストを生成する方法が4つあります。これらの方法は様々な状況で便利です。

プレーンテキストは、タグと文字列補間を適用しますが、最初の文字はPugのタグではありません。そして、プレーンテキストはエスケープされていないので、 HTMLを含めることもできます。

よくある落とし穴は、HTMLのスペース管理です。これについては、ページの最後に説明します。

インラインタグ

プレーンテキストはインラインで追加するのが最も簡単な方法です。行の最初の要素はタグそのものです。タグ+スペースの後に続く文字が全てテキストコンテンツです。
テキストコンテンツが短い場合は、一番便利な方法です。 (テキストコンテンツが長くても気にしないというなら、それも良いでしょう。)

p This is plain old <em>text</em> content.

<p>This is plain old <em>text</em> content.</p>

HTMLリテラル

小なり<で始まる行はプレーンテキストとして扱われます。これは、生のHTMLを書かなければいけない場所にHTMLを書く場合に役立ちます。 1つの例としては、条件付きコメントで使う場合に便利です。
HTMLリテラルはPugのタグとは違い、処理されないのでタグの自己終了は行いません。

<html>

body
  p Indenting the body tag here would make no difference.
  p HTML itself isn't whitespace-sensitive.

</html>

<html>

<body>
  <p>Indenting the body tag here would make no difference.</p>
  <p>HTML itself isn't whitespace-sensitive.</p>
</body>

</html>

パイプ

行の先頭にパイプ(|)を追加する方法もあります。この方法は後述するスペース管理でプレーンテキストとタグを混在させるのに便利です。

p
  | The pipe always goes at the beginning of its own line,
  | not counting indentation.

<p>The pipe always goes at the beginning of its own line,
  not counting indentation.</p>

ブロック

しばしば、タグ内に大きなブロックが必要な場合があります。例としてはJavaScriptのscriptや、CSSのstyle等です。
この場合、単にタグ名の後 (属性があれば括弧の後)に .を追加するだけです。

タグと.(ドット)の間にはスペースを入れないでください。また、プレーンテキストの内容は1段階インデントしなければなりません。

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 This text belongs to the paragraph tag.
  br
  .
    This text belongs to the div tag.

<div>
  <p>This text belongs to the paragraph tag.</p>
  <br />This text belongs to the div tag.
</div>

スペース管理

HTMLのスペース管理は、Pugの学習において最も難しいことの1つです。でも心配しないでください。すぐに理解することが出来るはずです。

スペースについて忘れてはならない2つの大事なポイントがあります。 HTMLをコンパイルする時、

Pugは全てのインデントと、タグ間のスペースを削除します。
- したがって、閉じタグは次の開始タグにくっつきます。これは段落のようなブロックレベルの要素であれば、通常ブラウザが別々の段落として表示するため問題にはなりません。 (CSSのdisplayプロパティを変更していない場合。)
  しかし、各要素間でスペースを入れる必要がある場合は、下記の例を参照してください。
Pugは要素と、インクルードした中身のスペースを保持します。
- Pugタグ以降のテキストに含まれているスペース
- ブロックコンテンツの基準を超えた(2段以上深いネスト)時の先頭のスペース
  * 確認しましたが削除されます。
- 末尾のスペース
- プレーンテキスト内の改行と、パイプで繋がった行にあるスペース

Pugはタグ間のスペースを削除しますが、タグ内のスペースはそのまま保持します。大事なことは、タグとプレーンテキスト間のスペースを完全に制御することです。タグをテキスト内に含めることで実現できます。

| You put the em
em pha
| sis on the wrong syl
em la
| ble.

You put the em<em>pha</em>sis on the wrong syl<em>la</em>ble.

タグとテキスト間のスペースを制御と、その必要性を考えることはトレード・オフです。

タグとテキストをくっつける必要がある場合 (恐らく文章末尾の句点(ピリオド)をリンクの外に設置するのに必要です。)、以下のように指定します。特に指定しなければPugは何もしません。

a ...sentence ending with a link
| .

<a>...sentence ending with a link</a>.

スペースが必要な場合はいくつかのオプションがあります。

推奨

1つまたは複数のパイプラインを追加することができます。パイプの後にはスペースまたは、空を指定します。するとレンダリングされたHTMLにスペースが挿入されます。

| Don't
|
button#self-destruct touch
|
| me!

Don't
<button id="self-destruct">touch</button>
me!

インラインタグに沢山の属性を指定する必要が無い場合、タグ補間や、HTMLリテラルを挿入するのが簡単です。

p.
  Using regular tags can help keep your lines short,
  but interpolated tags may be easier to \#[em visualize]
  whether the tags and text are whitespace-separated.

<p>Using regular tags can help keep your lines short,
  but interpolated tags may be easier to #[em visualize]
  whether the tags and text are whitespace-separated.</p>

非推奨

スペースが必要な場所に対して、テキストの先頭に余分なスペースを入れることができます。 (スペースを入れられるのは、ブロックインデントの後、パイプ(|)の後、タグの後) また、行の末尾にもスペースを付与することができます。

行の先頭と末尾にスペースがあります

| Hey, check out 
a(href="http://example.biz/kitteh.png") this picture
|  of my cat!

Hey, check out <a href="http://example.biz/kitteh.png">this picture</a> of my cat!

上記は正常に動作しますが少し危険です。なぜなら、多くのエディタでは保存時に行末のスペースを削除しますので、エディタの設定で末尾のスペースを削除しない設定に変更しなければなりません。

このコンテンツはpugドキュメントを翻訳/改変したものです。