Nested inline elements with Jade

Question

I'm trying to render properly this chunck of html code in Jade

<h1>Hello<small> world</small></h1>

unfortunately everything I tried it doesn't work.

I have tried putting small inline but it doesn't work. I have tried to put small in a new line but in that way small is not nested in h1 tags

Answer 1

Starting with Jade 1.0, circa December 2013, inline tags are supported using the following syntax:

#[tag(attribute='value') lorem ipsum]

Using your HTML example of:

<h1>Hello <small>world</small></h1>

Could be rewritten in Jade as:

h1 Hello #[small world]

---

While not as popular — and certainly not better — you can also mix and max Jade tags with regular HTML, such as:

h1 Hello <small>world</small>

The Jade Playground is a great place to try out new techniques!