Add a whitespace at the end of the line in Jade

Problem

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 by<a href="http://www.gravatar.com/" target="_blank">Gravatar</a></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.

Problem courtesy of: Lanbo

Solution

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
Solution courtesy of: iopq

Discussion

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&nbsp;
    a(href='http://www.gravatar.com/', target='_blank') Gravatar

or

p
    | Avatar hosted by
    |  <a href='http://www.gravatar.com/' target='_blank'>Gravatar</a>
Discussion courtesy of: jmar777

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.

Discussion courtesy of: Fred Polli

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/

Discussion courtesy of: Sean Gravener

I use the space variable at new line. This:

p
    | You must follow
    =space
    a(href=default_url) this link
Discussion courtesy of: Даниил Пронин

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.

Discussion courtesy of: Óscar Gómez Alcañiz

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.

Discussion courtesy of: Jim Schubert

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

Discussion courtesy of: Alice Tribuleva

This recipe can be found in it's original form on Stack Over Flow.