Pug: Force add white space to the end of a line

Question

So I have this basic pug code

p This is some text
  span foo
  span bar

The expected output would look like this:

This is some text foo bar

However it actually outputs this (white space is removed):

This is some textfoobar

It is possible to add the space by adding an empty white space to the end of the line.

I need to be able to retain the white space though when white space trimming is turned on in my editor. White space trimming removes the white space from the end of the line when you save the file.

So is there a way to force add white space to the end of a line that is retained even when white space trimming is turned on in an editor?

Procreate

Answer 1

Actually there is kind of another way. Adding an extra space before each word in the spans will result in the text not merging together into one word when viewed in browser.

// no extra spaces
p This is some text
  span foo
  span bar

// extra space method
p This is some text
  span  foo
  span  bar

// JS literals method
p This is some text!{' '}
  span foo
  | !{' '}
  span bar

The extra space method is cleaner than the JS literals method I posted previously however it causes white space to be placed inside the span instead of around it.

Using the extra space method produces this HTML:

<p>This is some text<span> foo</span><span> bar</span></p>

Using the JS literals method produces this HTML:

<p>This is some text <span>foo</span> <span>bar</span></p>

The HTML output without using either method:

<p>This is some text<span>foo</span><span>bar</span></p>

Procreate

Answer 2

I've found a good solution to this :)

p This is some text!{' '}
  span foo
  | !{' '}
  span bar

!{} in pug essentially means this:

Interpret the following as javascript and output the result exactly as written

So by adding !{' '} to the end of the line, it force adds an empty white space to the end of the pug text that will not be cut off by white space trimming software.

Procreate

I used to use this workaround but it no longer seems to work anymore... – Upholsterer

Answer 3

Pipe character acts like a space if you do not put any character after it

p This is some text
  |
  span foo
  |
  span bar

Result: This is some text foo bar

Gusset

Answer 4

You can use the = operator and quotes for buffered code, for example:

p= 'This is some text '
  span= 'foo '
  span bar

Upholsterer

Good in simple cases. Drawbacks are that it prevents you from writing inline pug code. It also places the space inside one of the spans which is potentially undesirable but ok in most circumstances. – Procreate

Answer 5

The solutions here are not very clean. Personnally, I use escaped characters which is a solution that allows me to use every single Unicode character without any problem (including characters used by HTML) :

p This is some text
  span  foo
  span  bar

Table of the most used ones

Wensleydale

Your solution is just the "extra space method" but using a Unicode character instead of a regular old space. Uglier and more difficult to write from my perspective. – Procreate

Answer 6

There is a documantation about this one in official Pug website now:

https://pugjs.org/language/interpolation.html#whitespace-control

Examples from it:

Input:

p
  | If I don't write the paragraph with tag interpolation, tags like
  strong strong
  | and
  em em
  | might produce unexpected results.
p.
  If I do, whitespace is #[strong respected] and #[em everybody] is happy.

Output:

<p>If I don't write the paragraph with tag interpolation, tags like<strong>strong</strong>and<em>em</em>might produce unexpected results.</p>
<p>If I do, whitespace is <strong>respected</strong> and <em>everybody</em> is happy.</p>

Quadrumanous