UNPKG

6.1 kBMarkdownView Raw
1# [![Pug - Node Template Engine](https://cdn.rawgit.com/pugjs/pug-logo/3ea2d3a86c6227020dd5b20743a5aa458808ca4e/SVG/__pug-logo-colour-wide.svg)](http://jade-lang.com/)
2
3Full documentation is at [jade-lang.com](http://jade-lang.com/)
4
5 Pug is a high performance template engine heavily influenced by [Haml](http://haml.info/)
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/pugjs/pug/issues/new).
8 For discussion join the [chat room](https://gitter.im/pugjs/pug).
9
10 You can test drive Pug online [here](http://jade-lang.com/).
11
12 [![Build Status](https://img.shields.io/travis/pugjs/pug/master.svg?style=flat)](https://travis-ci.org/pugjs/pug)
13 [![Coverage Status](https://img.shields.io/coveralls/pugjs/pug/master.svg?style=flat)](https://coveralls.io/r/pugjs/pug?branch=master)
14 [![Dependency Status](https://img.shields.io/david/pugjs/pug.svg?style=flat)](https://david-dm.org/pugjs/pug)
15 [![devDependencies Status](https://img.shields.io/david/dev/pugjs/pug.svg?style=flat)](https://david-dm.org/pugjs/pug#info=devDependencies)
16 [![NPM version](https://img.shields.io/npm/v/pug.svg?style=flat)](https://www.npmjs.com/package/pug)
17 [![Join Gitter Chat](https://img.shields.io/badge/gitter-join%20chat%20%E2%86%92-brightgreen.svg?style=flat)](https://gitter.im/pugjs/pug?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
18
19## Rename from "Jade"
20
21This project was formerly known as "Jade." However, it has been revealed to us that "Jade" is a registered trademark, and as a result a rename is needed. After some discussion among the maintainers, **"Pug"** has been chosen as the new name for this project. The next major version will carry "pug" as the package name.
22
23If your package or app currently uses `jade`, don't worry: we have secured permissions to continue to occupy that package name, although all new versions will be released under `pug`.
24
25Pug 2.0.0 is still under alpha stage, and there are several syntactic differences we have deprecated and removed. Such differences are documented at [#2305](https://github.com/pugjs/pug/issues/2305).
26
27The website and documentation for Pug are still being updated, but if you are new to Pug, you should get started with the new syntax and install the Pug package on npm.
28
29## Installation
30
31via npm:
32
33```bash
34$ npm install pug
35```
36
37## Syntax
38
39Pug is a clean, whitespace sensitive syntax for writing html. Here is a simple example:
40
41```pug
42doctype html
43html(lang="en")
44 head
45 title= pageTitle
46 script(type='text/javascript').
47 if (foo) bar(1 + 5)
48 body
49 h1 Pug - node template engine
50 #container.col
51 if youAreUsingPug
52 p You are amazing
53 else
54 p Get on it!
55 p.
56 Pug is a terse and simple templating language with a
57 strong focus on performance and powerful features.
58```
59
60becomes
61
62
63```html
64<!DOCTYPE html>
65<html lang="en">
66 <head>
67 <title>Pug</title>
68 <script type="text/javascript">
69 if (foo) bar(1 + 5)
70 </script>
71 </head>
72 <body>
73 <h1>Pug - node template engine</h1>
74 <div id="container" class="col">
75 <p>You are amazing</p>
76 <p>Pug is a terse and simple templating language with a strong focus on performance and powerful features.</p>
77 </div>
78 </body>
79</html>
80```
81
82The official [Pug tutorial](http://jade-lang.com/tutorial/) is a great place to start.
83
84## API
85
86For full API, see [jade-lang.com/api](http://jade-lang.com/api/)
87
88```js
89var pug = require('pug');
90
91// compile
92var fn = pug.compile('string of pug', options);
93var html = fn(locals);
94
95// render
96var html = pug.render('string of pug', merge(options, locals));
97
98// renderFile
99var html = pug.renderFile('filename.pug', merge(options, locals));
100```
101
102### Options
103
104 - `filename` Used in exceptions, and required when using includes
105 - `compileDebug` When `false` no debug instrumentation is compiled
106 - `pretty` Add pretty-indentation whitespace to output _(false by default)_
107
108## Browser Support
109
110 The latest version of pug can be download for the browser in standalone form from [here](https://raw.githubusercontent.com/pugjs/pug/1.11.0/pug.js). It only supports the very latest browsers though, and is a large file. It is recommended that you pre-compile your pug templates to JavaScript and then just use the [runtime.js](https://raw.githubusercontent.com/pugjs/pug/1.11.0/runtime.js) library on the client.
111
112 To compile a template for use on the client using the command line, do:
113
114```console
115$ pug --client --no-debug filename.pug
116```
117
118which will produce `filename.js` containing the compiled template.
119
120## Command Line
121
122After installing the latest version of [node](http://nodejs.org/), install with:
123
124```console
125$ npm install pug-cli -g
126```
127
128and run with
129
130```console
131$ pug --help
132```
133
134## Additional Resources
135
136Tutorials:
137
138 - cssdeck interactive [Pug syntax tutorial](http://cssdeck.com/labs/learning-the-jade-templating-engine-syntax)
139 - cssdeck interactive [Pug logic tutorial](http://cssdeck.com/labs/jade-templating-tutorial-codecast-part-2)
140 - [Pug について。](https://gist.github.com/japboy/5402844) (A Japanese Tutorial)
141 - [Pug - 模板引擎](https://github.com/pugjs/pug/blob/master/Readme_zh-cn.md)
142
143Implementations in other languages:
144
145 - [php](https://github.com/pug-php/pug)
146 - [scala](https://scalate.github.io/scalate/documentation/scaml-reference.html)
147 - [ruby](https://github.com/slim-template/slim)
148 - [python](https://github.com/SyrusAkbary/pyjade)
149 - [java](https://github.com/neuland/jade4j)
150
151Other:
152
153 - [Emacs Mode](https://github.com/brianc/jade-mode)
154 - [Vim Syntax](https://github.com/digitaltoad/vim-pug)
155 - [TextMate Bundle](http://github.com/miksago/jade-tmbundle)
156 - [Coda/SubEtha syntax Mode](https://github.com/aaronmccall/jade.mode)
157 - [html2pug](https://github.com/donpark/html2jade) converter
158 - [pug2php](https://github.com/SE7ENSKY/jade2php) converter
159 - [Pug Server](https://github.com/ded/jade-server) Ideal for building local prototypes apart from any application
160
161## License
162
163MIT