A Basic Introduction to Jade

JADE

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:

div
  h1 Fruits
  ul
    li Tomato
    li Mango
  p.
    Fruits are full of nutrition.

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 :

1. Simple tags
2. Tag's attribute
3. Text block

 1.Simple Tags

In Jade, we don't need to close the tags. Just indentations are enough and that seems to have nested tags.

div
  p Hi!
  p You!

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. 

 2.Tag's attribute

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

 3.Text block

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.

div
  p Jade!
  p.
    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.