Geek Answers Handbook

Nested Inline Elements with Jade

I'm trying to make this chunck html code correctly in jade

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

Unfortunately, everything I tried does not work.

I tried installing small inline, but it does not work. I tried to put the small one in a new line, but in this case the small one is not nested in the h1 tags

+7
pug
source share
3 answers

I found this solution and it works. Starting with Jade 1.0 nested inline tags are supported

 h1 Hello #[small world]
+17
source share

Starting in Jade 1.0 , around December 2013, inline tags are supported using the following syntax:

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

Using your HTML example:

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

It can be rewritten in Jade as:

 h1 Hello #[small world]

Although it's not as popular - and certainly not better - you can also mix maximum Jade tags with plain HTML, for example:

 h1 Hello <small>world</small>

Jade Playground is a great place to try out new technologies!

+6
source share

Besides the built-in elements, you can also use HTML chunks after using the syntax for generating the first jade. So

 h1 Hello <small>world</small>

will also be displayed as

 <h1>Hello <small>world</small></h1>
+4
source share

More articles:


All Articles