What is a concise way to create inline elements in Jade

Question

I like to put all my inline elements in a single line.

<ul>
  <li><a>click<span>here</span><strong>!</strong></a></li>

Wondering if there's a better way to create inline elements in Jade than this:

ul
  li 
    a(href="#") click 
      span here
      strong !

This get's a little closer but I'm not sure how to add the span and strong tags without breaking the lines.

ul
  li: a(href='#') click
    span ...

This obviously isn't a super big problem but it's a little annoying that I can't put inline elements inline. Thanks for the help

score 128 · Accepted Answer · edited Jun 10 '15 at 15:04

128

Since version 1.0, jade supports inline tags:

#[tag(attribute='value') inner stuff]

In your case that would be:

ul
  li #[a(href="#") click  #[span here #[strong !]]]

edited Jun 10 '15 at 15:04

Sami Kuhmonen

answered Apr 15 '14 at 11:48

pfirpfel

This is SO much easier than the above syntax. Thanks! I've been looking for this for awhile! – nwalton Apr 30 '14 at 23:09
1

This should be the best answer. – Alex Mund Jul 13 '14 at 11:51
Definitely the one. Shame that Sublime's Jade lang doesn't highlight this syntax... – Matt Fletcher Aug 26 '14 at 12:58
2

Really a shame, because Atom's does. – JP de la Torre Oct 21 '14 at 03:26

score 30 · Answer 2 · answered Aug 14 '13 at 02:16

30

Ran into this today myself. Found a way to do this in jade using the pipe. Here is my example wrapping a strong tag inside a p element.

p.some-class
    strong This Renders Strong                          
    |This renders normal

answered Aug 14 '13 at 02:16

marcus hall

Ah, been looking for something like this for ages. Cheers. – JVG Sep 05 '13 at 09:24
1

This is the better answer? Perfect for my needs. – DrHall Jan 27 '14 at 01:38
3

You won't get a space between Strong and This though: `...StrongThis...` – Tim Feb 11 '15 at 13:06

score 17 · Answer 3 · answered Jun 08 '12 at 18:36

17

I also struggled with this a while back; the only answer I found is to just use HTML.

ul
  li: a(href='#') click<span>here</span><strong>!</strong>

answered Jun 08 '12 at 18:36

Michelle Tilley

The `<` and `>` will become `<` and `>` after rendering the jade into HTML. – AGamePlayer Dec 22 '13 at 05:15

3 Answers3