Mithat Konar (the wiki)

User Tools

Site Tools

You are here: Mithat Konar (the wiki) » JavaScript stuff » Jade » Getting started
javascript:jade:getting_started

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
javascript:jade:getting_started [2014/03/18 03:50] – mithatjavascript:jade:getting_started [2014/03/18 03:56] (current) – mithat
Line 12: Line 12:
 ===== Creating an HTML fragment ===== ===== Creating an HTML fragment =====
  
-==== Rendering strings in Jade to HTML ====+==== Rendering Jade strings to HTML ====
  
 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. 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.
Line 26: Line 26:
 output: <code><p>Hello, world</p></code> output: <code><p>Hello, world</p></code>
  
-==== Compiling strings in Jade into functions ====+==== Compiling Jade strings into functions ====
  
 You can use the ''jade.compile'' method to create a function that when called will return the converted Jade. You can use the ''jade.compile'' method to create a function that when called will return the converted Jade.
Line 44: Line 44:
 output: <code><p>Hello, world</p></code> output: <code><p>Hello, world</p></code>
  
-==== jade.renderFile ====+==== Rendering a file full of Jade ====
  
 In a lot of cases, you will want to render code that is stored in a file rather than in a string literal or variable. You can do that with the ''jade.renderFile'' method. In a lot of cases, you will want to render code that is stored in a file rather than in a string literal or variable. You can do that with the ''jade.renderFile'' method.
Line 63: Line 63:
  
 output: <code><h1>Hello, there!</h1><p>Nice to meet you.</p></code> output: <code><h1>Hello, there!</h1><p>Nice to meet you.</p></code>
 +
 +=== Adding options ===
  
 The above produces valid HTML, but it's 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.) The above produces valid HTML, but it's 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.)
Line 81: Line 83:
 output: <code><h1>Hello, there!</h1> output: <code><h1>Hello, there!</h1>
 <p>Nice to meet you.</p></code> <p>Nice to meet you.</p></code>
 +
 +=== Using the callback function ===
  
 You can (and should) also take anvantage of the callback that you can pass to ''jade.renderFile'' to handle errors: You can (and should) also take anvantage of the callback that you can pass to ''jade.renderFile'' to handle errors:
Line 102: Line 106:
 </file> </file>
  
-==== Writing output to file ====+==== Writing output to a file ====
 To write the output created to a file, you'll need to use Node.js' ''fs'' module. To write the output created to a file, you'll need to use Node.js' ''fs'' module.
  
Line 138: Line 142:
 ===== Creating web pages ===== ===== Creating web pages =====
  
-In this section, we will use Jade to build a simple but complete web page. It will serve as an introduction to some fundamental Jade language concepts.+In this section, we will use Jade to build a simple but complete web page. It will serve as an introduction to fundamental Jade language concepts.
  
 <file jade myPage.jade> <file jade myPage.jade>
javascript/jade/getting_started.1395114623.txt.gz · Last modified: 2014/03/18 03:50 by mithat
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki