1 | # [![Jade - Node Template Engine](http://garthdb.com/img/jade_branding/jade-01.svg)](http://jade-lang.com/)
|
2 |
|
3 | Full documentation is at [jade-lang.com](http://jade-lang.com/)
|
4 |
|
5 | Jade is a high performance template engine heavily influenced by [Haml](http://haml-lang.com)
|
6 | and implemented with JavaScript for [node](http://nodejs.org) and browsers. For bug reports,
|
7 | feature requests and questions, [open an issue](https://github.com/jadejs/jade/issues/new).
|
8 | For discussion join the [chat room](https://gitter.im/jadejs/jade).
|
9 |
|
10 | You can test drive Jade online [here](http://naltatis.github.com/jade-syntax-docs).
|
11 |
|
12 | [![Build Status](https://img.shields.io/travis/jadejs/jade/master.svg?style=flat)](https://travis-ci.org/jadejs/jade)
|
13 | [![Coverage Status](https://img.shields.io/coveralls/jadejs/jade/master.svg?style=flat)](https://coveralls.io/r/jadejs/jade?branch=master)
|
14 | [![Dependency Status](https://img.shields.io/david/jadejs/jade.svg?style=flat)](https://david-dm.org/jadejs/jade)
|
15 | [![devDependencies Status](https://img.shields.io/david/dev/jadejs/jade.svg?style=flat)](https://david-dm.org/jadejs/jade#info=devDependencies)
|
16 | [![NPM version](https://img.shields.io/npm/v/jade.svg?style=flat)](http://badge.fury.io/js/jade)
|
17 | [![Join Gitter Chat](https://img.shields.io/badge/gitter-join%20chat%20%E2%86%92-brightgreen.svg?style=flat)](https://gitter.im/jadejs/jade?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
18 |
|
19 | ## Installation
|
20 |
|
21 | via npm:
|
22 |
|
23 | ```bash
|
24 | $ npm install jade
|
25 | ```
|
26 |
|
27 | ## Syntax
|
28 |
|
29 | Jade is a clean, whitespace sensitive syntax for writing html. Here is a simple example:
|
30 |
|
31 | ```jade
|
32 | doctype html
|
33 | html(lang="en")
|
34 | head
|
35 | title= pageTitle
|
36 | script(type='text/javascript').
|
37 | if (foo) bar(1 + 5)
|
38 | body
|
39 | h1 Jade - node template engine
|
40 | #container.col
|
41 | if youAreUsingJade
|
42 | p You are amazing
|
43 | else
|
44 | p Get on it!
|
45 | p.
|
46 | Jade is a terse and simple templating language with a
|
47 | strong focus on performance and powerful features.
|
48 | ```
|
49 |
|
50 | becomes
|
51 |
|
52 |
|
53 | ```html
|
54 | <!DOCTYPE html>
|
55 | <html lang="en">
|
56 | <head>
|
57 | <title>Jade</title>
|
58 | <script type="text/javascript">
|
59 | if (foo) bar(1 + 5)
|
60 | </script>
|
61 | </head>
|
62 | <body>
|
63 | <h1>Jade - node template engine</h1>
|
64 | <div id="container" class="col">
|
65 | <p>You are amazing</p>
|
66 | <p>Jade is a terse and simple templating language with a strong focus on performance and powerful features.</p>
|
67 | </div>
|
68 | </body>
|
69 | </html>
|
70 | ```
|
71 |
|
72 | The official [jade tutorial](http://jade-lang.com/tutorial/) is a great place to start. While that (and the syntax documentation) is being finished, you can view some of the old documentation [here](https://github.com/jadejs/jade/blob/master/jade.md) and [here](https://github.com/jadejs/jade/blob/master/jade-language.md)
|
73 |
|
74 | ## API
|
75 |
|
76 | For full API, see [jade-lang.com/api](http://jade-lang.com/api/)
|
77 |
|
78 | ```js
|
79 | var jade = require('jade');
|
80 |
|
81 | // compile
|
82 | var fn = jade.compile('string of jade', options);
|
83 | var html = fn(locals);
|
84 |
|
85 | // render
|
86 | var html = jade.render('string of jade', merge(options, locals));
|
87 |
|
88 | // renderFile
|
89 | var html = jade.renderFile('filename.jade', merge(options, locals));
|
90 | ```
|
91 |
|
92 | ### Options
|
93 |
|
94 | - `filename` Used in exceptions, and required when using includes
|
95 | - `compileDebug` When `false` no debug instrumentation is compiled
|
96 | - `pretty` Add pretty-indentation whitespace to output _(false by default)_
|
97 |
|
98 | ## Browser Support
|
99 |
|
100 | The latest version of jade can be download for the browser in standalone form from [here](https://github.com/jadejs/jade/raw/master/jade.js). It only supports the very latest browsers though, and is a large file. It is recommended that you pre-compile your jade templates to JavaScript and then just use the [runtime.js](https://github.com/jadejs/jade/raw/master/runtime.js) library on the client.
|
101 |
|
102 | To compile a template for use on the client using the command line, do:
|
103 |
|
104 | ```console
|
105 | $ jade --client --no-debug filename.jade
|
106 | ```
|
107 |
|
108 | which will produce `filename.js` containing the compiled template.
|
109 |
|
110 | ## Command Line
|
111 |
|
112 | After installing the latest version of [node](http://nodejs.org/), install with:
|
113 |
|
114 | ```console
|
115 | $ npm install jade -g
|
116 | ```
|
117 |
|
118 | and run with
|
119 |
|
120 | ```console
|
121 | $ jade --help
|
122 | ```
|
123 |
|
124 | ## Additional Resources
|
125 |
|
126 | Tutorials:
|
127 |
|
128 | - cssdeck interactive [Jade syntax tutorial](http://cssdeck.com/labs/learning-the-jade-templating-engine-syntax)
|
129 | - cssdeck interactive [Jade logic tutorial](http://cssdeck.com/labs/jade-templating-tutorial-codecast-part-2)
|
130 | - [Jade について。](https://gist.github.com/japboy/5402844) (A Japanese Tutorial)
|
131 | - [Jade - 模板引擎](https://github.com/jadejs/jade/blob/master/Readme_zh-cn.md)
|
132 |
|
133 | Implementations in other languages:
|
134 |
|
135 | - [php](http://github.com/everzet/jade.php)
|
136 | - [scala](http://scalate.fusesource.org/versions/snapshot/documentation/scaml-reference.html)
|
137 | - [ruby](https://github.com/slim-template/slim)
|
138 | - [python](https://github.com/SyrusAkbary/pyjade)
|
139 | - [java](https://github.com/neuland/jade4j)
|
140 |
|
141 | Other:
|
142 |
|
143 | - [Emacs Mode](https://github.com/brianc/jade-mode)
|
144 | - [Vim Syntax](https://github.com/digitaltoad/vim-jade)
|
145 | - [TextMate Bundle](http://github.com/miksago/jade-tmbundle)
|
146 | - [Coda/SubEtha syntax Mode](https://github.com/aaronmccall/jade.mode)
|
147 | - [Screencasts](http://tjholowaychuk.com/post/1004255394/jade-screencast-template-engine-for-nodejs)
|
148 | - [html2jade](https://github.com/donpark/html2jade) converter
|
149 | - [jade2php](https://github.com/SE7ENSKY/jade2php) converter
|
150 | - [Jade Server](https://github.com/ded/jade-server) Ideal for building local prototypes apart from any application
|
151 |
|
152 | ## License
|
153 |
|
154 | MIT
|