Add a whitespace at the end of the line in Jade - node.js

Question

I have this jade code:
p
| Avatar hosted by
a(href='http://www.gravatar.com/', target='_blank') Gravatar
The problem is, it's rendered to
<p>Avatar hosted byGravatar</p>
Which looks like: "Avatar hosted byGravatar".
No matter how many spaces I added at the end of the text line, it still looks like this. The Docs couldn't help me, and I can't imagine this to be such an uncommon problem.

Answer 1

If you don't want inline HTML or HTML entities in your code this is what you can do:
p
| Avatar hosted by
= ' '
a(href='http://www.gravatar.com/', target='_blank') Gravatar
or this is is shorter
p= 'Avatar hosted by '
a(href='http://www.gravatar.com/', target='_blank') Gravatar
The cleanest is probably this
p Avatar hosted by #{''}
a(href='http://www.gravatar.com/', target='_blank') Gravatar

Answer 2

Which version of jade are you using? I just tested (with 0.25.0) with a single space following 'by', and it worked correctly.
Other options are:
p
| Avatar hosted by
a(href='http://www.gravatar.com/', target='_blank') Gravatar
or
p
| Avatar hosted by
| <a href='http://www.gravatar.com/' target='_blank'>Gravatar</a>

Answer 3

Jade now supports interpolation of inline tags.
p this is #[strong test] of how jade will treat #[i #[u inline tags]]... like #[a(href="/") anchor tags] and #[+a() mixins].
http://jade-lang.com/reference/interpolation/

Answer 4

Are you sure it's not your editor? I use Komodo and it was set to strip trailing whitespace on save. It was stripping the space at the end of my text line when I saved the file. The lack of a space between my text and links was driving me nuts until I figured that out. I changed Komodo's settings (Preferences->Editor->Save Options) to uncheck strip trailing white space, and the problem went away.

Answer 5

I use the space variable at new line. This:
p
| You must follow
=space
a(href=default_url) this link

Answer 6

edit:
As jmar777 pointed out, recent versions of jade should honor trailing whitespace see here. That's awesome, and I may try jade again on future projects.
edit:
Updated link to jade parser. Original link was for jade 1.11.

Answer 7

A quick and clean solution is to use this syntax:
p
| Avatar hosted by
|
a(href='http://www.gravatar.com/', target='_blank') Gravatar
Note the space after | on the second text line. This will add a blank space after the previous line's text (and also spit out a nasty error if you forget to add it!).
So far this is the cleanest option, in my opinion.

Answer 8

I'm using Harp, and the solution with two pipes by Óscar Gómez throws an error, although it looks very elegant.
Thanks to Даниил Пронин and Sean Gravener, I found these solutions working for me:
#{' '}
!{' '}
and
= " "
p
| Avatar hosted by #{' '}
a(href='http://www.gravatar.com/', target='_blank') Gravatar
and
p
| Avatar hosted by
= ' '
a(href='http://www.gravatar.com/', target='_blank') Gravatar
Also, if you're having kind of a reverse situation:
span text #{ ref + [' '] }
Here's more on syntax interpolation in Pug (Jade):
https://pugjs.org/language/interpolation.html