CODEWITHSUNDEEP
pug
Mazzy
Mazzy

Reputation: 14189

Nested inline elements with Jade

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

Upvotes: 11

Views: 7886

Answers (3)

rjb
rjb

Reputation: 9106

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!

Upvotes: 10

saintedlama
saintedlama

Reputation: 6898

Beside of inline elements you can also use HTML chunks after using the first jade element generating syntax. So

h1 Hello <small>world</small>

will also render as

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

Upvotes: 4

Mazzy
Mazzy

Reputation: 14189

I have found this solution and it works. Since Jade 1.0 the nested inline tags are supported

h1 Hello #[small world]

Upvotes: 24

Related Questions