Blog

  • A Basic Introduction to Jade

    Posted by Tajinder Singh | Last Updated: 15-Jan-19

    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.

Tags: html