Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

whitespace

pug

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?

like image 773
Daniel Tonon Avatar asked May 05 '17 08:05

Daniel Tonon


People also ask

How does whitespace work in Pug?

You just need to remember two main points about how whitespace works. When compiling to HTML: Pug removes indentation, and all whitespace between elements. So, the closing tag of an HTML element will touch the opening tag of the next.

How do I get plain text in Pug?

Pug provides four ways of getting plain text — that is, any code or text content that should go, mostly unprocessed, directly into the rendered HTML. They are useful in different situations. Plain text does still use tag and string interpolation, but the first word on the line is not a Pug tag.

When compiling to HTML does Pug remove indentation?

When compiling to HTML: Pug removes indentation, and all whitespace between elements. So, the closing tag of an HTML element will touch the opening tag of the next.

What is the difference between Pug and line break?

line breaks within a plain text block, or between consecutive piped lines. So…Pug drops the whitespace between tags, but keeps the whitespace inside them. The value here is that it gives you full control over whether tags and/or plain text should touch. It even lets you place tags in the middle of words.


Video Answer


1 Answers

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>
like image 160
Daniel Tonon Avatar answered Sep 20 '22 18:09

Daniel Tonon