In my previous blog post I showed how one would install jade template engine for node.js and the terse markup that it provides. In this post I will continue on the jade and show the basic syntax of using jade template engine.

Basic syntax of Jade Template Engine for Node.js

As mentioned in earlier post, Jade is indentation-based, each level of indentation creates its own block. Thus the spaces are important/significant to it, also jade does not use end tags like html nor angle brackets. As we saw earlier in the p tag in our example.

Here is a simple example of h4 wrapped in span

   

In the next example if we removed the indentation we will not get h4 as the child of a span.

   

The using of the | character can also signal for a textblock of text.

   

Jade also provides a shorthand for textblock rather than using all the pipe “|” character one can just add a period to the tag, and add additional html elements.

   

Attributes

Attributes like class and id can be added by using the bracket sytanx to a tag, and multiple styles can be added with an array like syntax.

   

One can also pass in data as JSON for data-* attributes

Shortcuts

Here are some shortcuts of attributes for class and id when using jade, one can use the “#” for id and the period “.” of class right after the tag, and there is also automatic divs that jade provides

   

Block expansion

Sometimes the indentation could becoming annoying when you are creating ordered or unordered list.

Jade has a solution to this since being terse is what jade is all about, it provides a “:” shortcut to simplify this for us.

Comments and Block Comments

Jade also provides a way to comment out your template like the Javascript syntax it uses // and if you use // – it will not show the comment in the rendered html. It also provides a block syntax where if you indent the line after the comment it will comment out the following tags also.

   

Summary

I have covered most of the basic syntax of Jade here in this blog post, in my next post I will write about how to bind data into the template.