How to convert Jade to HTML?

Posted in Articles

Jade is a concise way to write HTML.  But browsers still can only read HTML.  While there are many tools and framework that converts Jade into HTML, there are a couple of manual ways to do it if you want write in Jade and then convert it to HTML for use.

One way is to use the online tool html2jade.org.  While it can convert HTML 2 Jade, it also has a tab that converts Jade to HTML.  The nice thing is that it runs in real time.  As you type Jade on the left pane, you immediately see the HTML output on the right pane.  This is a good way to learn Jade.

Another way is to use npm to install jade.  This command …

npm install jade -g

will install jade as a global module.  npm is Node Package Manager that comes automatically when you install NodeJS.  Learn from our tutorial on Node Package Manager.

Once jade is installed. You can run …

jade myfile.jade -P

The -P flag is same as “–pretty” flag which compiles your Jade file to pretty html output into a file with the same name but with the .html extension (in our case, we get back myfile.html).

Sample Jade File

You can test it out with this sample Jade file that looks  like this …

You should get HTML output that looks like …

---