Text

Short text goes on the same line as the tag. For long text and for text mixed with tags Pug has two more ways: lines starting with a vertical bar and a text block after a dot.

Text on the tag line

Everything after the tag name and a space is text. Add to src/index.pug:

p Fresh coffee every day.

This is the most common way:

<p>Fresh coffee every day.</p>

Lines with a vertical bar

Long text can continue on the following lines. Each such line starts with | and a space:

p
  | We brew coffee
  | from freshly roasted beans.

Pug joins the lines inside one paragraph and keeps the line breaks between them:

<p>
  We brew coffee
  from freshly roasted beans.
</p>

The browser shows a line break as a space, so the page displays a single sentence.

A block of text

A dot right after the tag tells Pug that everything indented below is text only, and no tags are looked for there:

p.
  Morning Café has been open since 2015.
  We roast our own beans.

The vertical bars are no longer needed:

<p>
  Morning Café has been open since 2015.
  We roast our own beans.
</p>

A dot block is especially handy for style and script tags that contain CSS or JavaScript:

style.
  .note { color: brown; }
script.
  console.log("Hello from Pug");

Pug does not parse the code inside and copies it as is:

<style>.note { color: brown; }</style>
<script>console.log("Hello from Pug");</script>

Below the example you will see the line "Hello from Pug" printed by the script.

A tag inside text

To highlight a word inside a paragraph, use the #[tag text] syntax:

p Call us: #[strong +1 555 0100]

Inside the square brackets the usual Pug syntax works, with classes and attributes:

<p>Call us: <strong>+1 555 0100</strong></p>

Common mistake

A lost space between text and a tag. Lines with | and tags on separate lines are glued together with no space:

p
  | See our
  a(href="menu.html") menu
  | .

The page shows "See ourmenu.":

<p>See our<a href="menu.html">menu</a>.</p>

Inside a sentence put the tag in #[...]: p See our #[a(href="menu.html") menu]. — then the spaces stay where you wrote them.