Differences

This shows you the differences between two versions of the page.

--- javascript:jade [2014/03/17 23:04] – mithat
+++ javascript:jade [2014/03/18 03:41] (current) – removed mithat
@@ Line 1: / Line 1: @@
-====== Jade ======
-[[http://jade-lang.com|Jade]] is billed as a template engine for [[http://nodejs.org/|Node.js]], but I think it's better thought of as a language that makes writing HTML easier and also lets you do templating.
-===== Getting started =====
-==== Installing Jade ====
-To use Jade, you must first have Node.js installed on your system. On Windows and MacOS, you can use an [[http://nodejs.org/download/|installer]]; on Linux, you should be able to [[https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager|use your package manager]]((See http://lovingthepenguin.blogspot.com/2013/10/node-no-such-file-or-directory.html for a potential gotcha on Debian-based systems.)).
-Once you have Node.js installed, you have the choice of installing it so it available system-wide or only for a particular project. To make it available system-wide, open a terminal and enter <code>npm install jade -g</code>
-Until I get a good grasp of using Jade, I want to install it on a per-project basis. To do this, open a terminal in your project directory (or navigate to the directory) and enter <code>npm install jade</code>
-When this is done you should see a ''node_modules'' subdirectory. Inside that directory will be the Jade modules as well as any other modules Jade depends on.
-==== Creating an HTML fragment ====
-=== jade.render ===
-The first thing we are going to do is use Jade to produce an HTML fragment from a string literal. This is done with the ''jade.render'' method.
-<file javascript render-simple-fragment.js >
-var jade = require('jade');
-// Render an HTML fragment from a string literal
-// written in Jade.
-var htmlFrag = jade.render('p Hello, world');
-console.log(htmlFrag);
-</file>
-=== jade.compile ===
-You can also create function that when called will return the fragment with the ''jade.compile'' method.
-<file javascript compile-simple-fragment.js>
-var jade = require('jade');
-// Compile a function that produces an HTML fragment
-// from a string literal written in Jade.
-var frag = jade.compile('p Hello, world');
-// Render stuff.
-var htmlFrag = frag();
-console.log(htmlFrag);
-</file>
-=== jade.renderFile ===
-In a lot of cases, you will want to render code that is stored in a file rather than in a string variable or literal. You can do that with the ''jade.renderFile'' method.
-<file jade myFrag.jade>
-h1 Hello, there!
-p Nice to meet you.
-</file>
-<file javascript render-simple-fragment-file.js>
-var jade = require('jade');
-// Render an HTML fragment from a file
-// written in Jade.
-var htmlFrag = jade.renderFile('myFrag.jade');
-console.log(htmlFrag);
-</file>
-The above produces output that is valid HTML but hard to read. To make the output human-readable, we can pass ''jade.renderFile'' an options object with its ''pretty'' property set to true. (The options argument can be provided to the ''jade.render'' and ''jade.compile'' methods as well.)
-<file javascript render-simple-fragment-file2.js>
-var jade = require('jade');
-options = {
-    pretty: true
-};
-// Render an HTML fragment from a file
-// written in Jade.
-var htmlFrag = jade.renderFile('myFrag.jade', options);
-console.log(htmlFrag);
-</file>