Add a whitespace at the end of the line in Jade

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 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.

iopq · Accepted Answer · 2013-10-24T14:51:32.680

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

score 39 · Answer 2 · answered May 09 '12 at 12:49

39

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>

answered May 09 '12 at 12:49

jmar777

38,796
11
66
64

Looks like I didn't add the version constraint in the `package.json`. – Lanbo May 09 '12 at 12:53
2

It's nice to know recent versions don't strip all whitespace and newlines from the end of text blocks. – Joseph Yaduvanshi May 09 '12 at 13:21
4

it may not strip, but your editor may. It would be nice if there was an easier way. – jpmorris Mar 03 '15 at 08:47

score 18 · Answer 3 · answered Feb 19 '15 at 19:17

18

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/

answered Feb 19 '15 at 19:17

Sean Gravener

181
1
3

score 6 · Answer 4 · answered Mar 28 '13 at 09:43

6

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.

answered Mar 28 '13 at 09:43

Fred Polli

155
1
10

3

This was my problem also. In Web Storm to disable this go to preferences and search for trailing. On the bottom of the page, under Other there is an option "Strip trailing spaces on Save". – Nikola Lajic Nov 28 '13 at 14:49

score 2 · Answer 5 · answered May 14 '14 at 04:49

2

I use the space variable at new line. This:

p
    | You must follow
    =space
    a(href=default_url) this link

answered May 14 '14 at 04:49

Даниил Пронин

1,200
18
34

Joseph Yaduvanshi · Answer 6 · 2015-09-23T14:43:32.233

1

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.

edited Sep 23 '15 at 14:43

answered May 09 '12 at 12:45

Joseph Yaduvanshi

20,241
5
61
69

`| a(href='http://www.gravatar.com/', target='_blank') Gravatar` will output as is (not as – Roman Bekkiev May 02 '14 at 14:50
@RolandBertolom I'm not sure down-voting a question that is two years old because the framework has changed is the right way to handle maintaining consistent historical data. Why not suggest an edit or comment that it has changed? You can see that the accepted answer to this question is exactly the same as mine... obviously Jade has changed. – Joseph Yaduvanshi May 02 '14 at 21:06
@lfender6445 thanks. I've updated with current version of jade-parser and retained the original link to jade 1.11. – Joseph Yaduvanshi Sep 23 '15 at 14:44

score 0 · Answer 7 · answered Nov 17 '16 at 22:33

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.

score 0 · Answer 8 · edited May 23 '17 at 12:02

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

Add a whitespace at the end of the line in Jade

8 Answers8