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

Answer 1

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 !]]]

Answer 2

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

Answer 3

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>