A Basic Introduction to Jade
Posted By : Tajinder Singh | 23-Aug-2018
Jade is a server-side templating engine that is used to make elegant Websites in NodeJS.It gives a number of advantages over HTML and thus it is called powerful write markup language.
Let us take an example:
Below is the HTML code with its syntax and format:
<div> <h1>Fruits</h1> <ul> <li>Tomato</li> <li>Mango</li> </ul> <p>Fruits are full of nutritions.</p> </div>
The above code can be written in Jade as follows:
As we can see it is Short and simple. it is not looking neat and easy. it has lots of more features that allow the code neat and simple. Let's take the overview of its basics.
These basics are :
- Simple tags
- Tag's attribute
- Text block
In Jade, we don't need to close the tags. Just indentations are enough and that seems to have nested tags.
Compilation in Jade is done like, it takes the first word of every line as a tag while other than the first word is treated as text.
If we are saying that the first word will be treated as a tag, then what would be taken as an attribute? It is also very simple. Let’s take the example that we have taken before and add in some classes and images.
div(class="fruits-card", id="fruit") h1(class="fruits-title") Fruits img(src="/img/Fruits.png", class="fruits") ul(class="fruit-list") li Tomato li Mango
If we have a large block of text and we wanted to place it in paragraph tag then we can do that also by adding a full stop at the end tag, that indicates, everything inside that tag is text and Jade stops treating the first word on each line as an HTML tag.