Hello ' + escape((interp = name) == null ? '' : interp) + '\\n
');\r\n }\r\n return buf.join(\"\");\r\n}\r\n```\r\n\r\n Through the use of Jade's `./runtime.js` you may utilize these pre-compiled templates on the client-side _without_ Jade itself, all you need is the associated utility functions (in runtime.js), which are then available as `jade.attrs`, `jade.escape` etc. To enable this you should pass `{ client: true }` to `jade.compile()` to tell Jade to reference the helper functions\r\n via `jade.attrs`, `jade.escape` etc.\r\n\r\n```js\r\nfunction anonymous(locals, attrs, escape, rethrow) {\r\n var attrs = jade.attrs, escape = jade.escape, rethrow = jade.rethrow;\r\n var buf = [];\r\n with (locals || {}) {\r\n var interp;\r\n buf.push('\\nHello ' + escape((interp = name) == null ? '' : interp) + '\\n
');\r\n }\r\n return buf.join(\"\");\r\n}\r\n```\r\n\r\n\r\n## Public API\r\n\r\n```js\r\nvar jade = require('jade');\r\n\r\n// Compile a function\r\nvar fn = jade.compile('string of jade', options);\r\nfn(locals);\r\n```\r\n\r\n### Options\r\n\r\n - `self` Use a `self` namespace to hold the locals _(false by default)_\r\n - `locals` Local variable object\r\n - `filename` Used in exceptions, and required when using includes\r\n - `debug` Outputs tokens and function body generated\r\n - `compiler` Compiler to replace jade's default\r\n - `compileDebug` When `false` no debug instrumentation is compiled\r\n - `pretty` Add pretty-indentation whitespace to output _(false by default)_\r\n\r\n\r\n## Syntax\r\n\r\n\r\n### Line Endings\r\n\r\n**CRLF** and **CR** are converted to **LF** before parsing.\r\n\r\n\r\n### Tags\r\n\r\nA tag is simply a leading word:\r\n\r\n```jade\r\nhtml\r\n```\r\n\r\nfor example is converted to ``\r\n\r\ntags can also have ids:\r\n\r\n```jade\r\ndiv#container\r\n```\r\n\r\nwhich would render ``\r\n\r\nhow about some classes?\r\n\r\n```jade\r\ndiv.user-details\r\n```\r\n\r\nrenders ``\r\n\r\nmultiple classes? _and_ an id? sure:\r\n\r\n```jade\r\ndiv#foo.bar.baz\r\n```\r\n\r\nrenders ``\r\n\r\ndiv div div sure is annoying, how about:\r\n\r\n```jade\r\n#foo\r\n.bar\r\n```\r\n\r\nwhich is syntactic sugar for what we have already been doing, and outputs:\r\n\r\n```html\r\n\r\n```\r\n\r\n\r\n### Tag Text\r\n\r\nSimply place some content after the tag:\r\n\r\n```jade\r\np wahoo!\r\n```\r\n\r\nrenders `wahoo!
`.\r\n\r\nwell cool, but how about large bodies of text:\r\n\r\n```jade\r\np\r\n | foo bar baz\r\n | rawr rawr\r\n | super cool\r\n | go jade go\r\n```\r\n\r\nrenders `foo bar baz rawr.....
`\r\n\r\ninterpolation? yup! both types of text can utilize interpolation,\r\nif we passed `{ name: 'tj', email: 'tj@vision-media.ca' }` to the compiled function we can do the following:\r\n\r\n```jade\r\n#user #{name} <#{email}>\r\n```\r\n\r\noutputs `#{something}
`\r\n\r\nWe can also utilize the unescaped variant `!{html}`, so the following\r\nwill result in a literal script tag:\r\n\r\n```jade\r\n- var html = \"\"\r\n| !{html}\r\n```\r\n\r\nNested tags that also contain text can optionally use a text block:\r\n\r\n```jade\r\nlabel\r\n | Username:\r\n input(name='user[name]')\r\n```\r\n\r\nor immediate tag text:\r\n\r\n```jade\r\nlabel Username:\r\n input(name='user[name]')\r\n```\r\n\r\nAs an alternative, we may use a trailing `.` to indicate a text block, for example:\r\n\r\n```jade\r\np.\r\n foo asdf\r\n asdf\r\n asdfasdfaf\r\n asdf\r\n asd.\r\n```\r\n\r\noutputs:\r\n\r\n```html\r\nfoo asdf\r\nasdf\r\n asdfasdfaf\r\n asdf\r\nasd.\r\n
\r\n```\r\n\r\nThis however differs from a trailing `.` followed by a space, which although is ignored by the Jade parser, tells Jade that this period is a literal:\r\n\r\n```jade\r\np .\r\n```\r\n\r\noutputs:\r\n\r\n```html\r\n.
\r\n```\r\n\r\nIt should be noted that text blocks should be doubled escaped. For example if you desire the following output.\r\n\r\n```html\r\nfoo\\bar
\r\n```\r\n\r\nuse:\r\n\r\n```jade\r\np.\r\n foo\\\\bar\r\n```\r\n\r\n\r\n### Comments\r\n\r\nSingle line comments currently look the same as JavaScript comments,\r\naka `//` and must be placed on their own line:\r\n\r\n```jade\r\n// just some paragraphs\r\np foo\r\np bar\r\n```\r\n\r\nwould output\r\n\r\n```html\r\n\r\nfoo
\r\nbar
\r\n```\r\n\r\nJade also supports unbuffered comments, by simply adding a hyphen:\r\n\r\n```jade\r\n//- will not output within markup\r\np foo\r\np bar\r\n```\r\n\r\noutputting\r\n\r\n```html\r\nfoo
\r\nbar
\r\n```\r\n\r\n\r\n### Block Comments\r\n\r\n A block comment is legal as well:\r\n\r\n```jade\r\nbody\r\n //\r\n #content\r\n h1 Example\r\n```\r\n\r\noutputting\r\n\r\n```html\r\n\r\n \r\n\r\n```\r\n\r\nJade supports conditional-comments as well, for example:\r\n\r\n```jade\r\nhead\r\n //if lt IE 8\r\n script(src='/ie-sucks.js')\r\n```\r\n\r\noutputs:\r\n\r\n```html\r\n\r\n \r\n\r\n```\r\n\r\n\r\n### Nesting\r\n\r\n Jade supports nesting to define the tags in a natural way:\r\n\r\n```jade\r\nul\r\n li.first\r\n a(href='#') foo\r\n li\r\n a(href='#') bar\r\n li.last\r\n a(href='#') baz\r\n```\r\n\r\n\r\n### Block Expansion\r\n\r\n Block expansion allows you to create terse single-line nested tags,\r\n the following example is equivalent to the nesting example above.\r\n\r\n```jade\r\nul\r\n li.first: a(href='#') foo\r\n li: a(href='#') bar\r\n li.last: a(href='#') baz\r\n```\r\n\r\n\r\n### Case\r\n\r\n The case statement takes the following form:\r\n\r\n```jade\r\nhtml\r\n body\r\n friends = 10\r\n case friends\r\n when 0\r\n p you have no friends\r\n when 1\r\n p you have a friend\r\n default\r\n p you have #{friends} friends\r\n```\r\n\r\n Block expansion may also be used:\r\n\r\n```jade\r\nfriends = 5\r\n\r\nhtml\r\n body\r\n case friends\r\n when 0: p you have no friends\r\n when 1: p you have a friend\r\n default: p you have #{friends} friends\r\n```\r\n\r\n\r\n### Attributes\r\n\r\nJade currently supports `(` and `)` as attribute delimiters.\r\n\r\n```jade\r\na(href='/login', title='View login page') Login\r\n```\r\n\r\nWhen a value is `undefined` or `null` the attribute is _not_ added,\r\nso this is fine, it will not compile `something=\"null\"`.\r\n\r\n```jade\r\ndiv(something=null)\r\n```\r\n\r\nBoolean attributes are also supported:\r\n\r\n```jade\r\ninput(type=\"checkbox\", checked)\r\n```\r\n\r\nBoolean attributes with code will only output the attribute when `true`:\r\n\r\n```jade\r\ninput(type=\"checkbox\", checked=someValue)\r\n```\r\n\r\nMultiple lines work too:\r\n\r\n```jade\r\ninput(type='checkbox',\r\n name='agreement',\r\n checked)\r\n```\r\n\r\nMultiple lines without the comma work fine:\r\n\r\n```jade\r\ninput(type='checkbox'\r\n name='agreement'\r\n checked)\r\n```\r\n\r\nFunky whitespace? fine:\r\n\r\n```jade\r\ninput(\r\n type='checkbox'\r\n name='agreement'\r\n checked)\r\n```\r\n\r\nColons work:\r\n\r\n```jade\r\nrss(xmlns:atom=\"atom\")\r\n```\r\n\r\nSuppose we have the `user` local `{ id: 12, name: 'tobi' }`\r\nand we wish to create an anchor tag with `href` pointing to \"/user/12\"\r\nwe could use regular javascript concatenation:\r\n\r\n```jade\r\na(href='/user/' + user.id)= user.name\r\n```\r\n\r\nor we could use jade's interpolation, which I added because everyone\r\nusing Ruby or CoffeeScript seems to think this is legal js..:\r\n\r\n```jade\r\na(href='/user/#{user.id}')= user.name\r\n```\r\n\r\nThe `class` attribute is special-cased when an array is given,\r\nallowing you to pass an array such as `bodyClasses = ['user', 'authenticated']` directly:\r\n\r\n```jade\r\nbody(class=bodyClasses)\r\n```\r\n\r\n\r\n### HTML\r\n\r\n Inline html is fine, we can use the pipe syntax to\r\n write arbitrary text, in this case some html:\r\n\r\n```jade\r\nhtml\r\n body\r\n |foo bar baz
\r\n```\r\n\r\n Or we can use the trailing `.` to indicate to Jade that we\r\n only want text in this block, allowing us to omit the pipes:\r\n\r\n```jade\r\nhtml\r\n body.\r\nfoo bar baz
\r\n```\r\n\r\n Both of these examples yield the same result:\r\n\r\n```html\r\nfoo bar baz
\r\n\r\n```\r\n\r\n The same rule applies for anywhere you can have text\r\n in jade, raw html is fine:\r\n\r\n```jade\r\nhtml\r\n body\r\n h1 User #{name}\r\n```\r\n\r\n\r\n### Doctypes\r\n\r\nTo add a doctype simply use `!!!`, or `doctype` followed by an optional value:\r\n\r\n```jade\r\n!!!\r\n```\r\n\r\nor\r\n\r\n```jade\r\ndoctype\r\n```\r\n\r\nWill output the _html 5_ doctype, however:\r\n\r\n```jade\r\n!!! transitional\r\n```\r\n\r\nWill output the _transitional_ doctype.\r\n\r\nDoctypes are case-insensitive, so the following are equivalent:\r\n\r\n```jade\r\ndoctype Basic\r\ndoctype basic\r\n```\r\n\r\nit's also possible to simply pass a doctype literal:\r\n\r\n```jade\r\ndoctype html PUBLIC \"-//W3C//DTD XHTML Basic 1.1//EN\"\r\n```\r\n\r\nyielding:\r\n\r\n```html\r\n\r\n```\r\n\r\nBelow are the doctypes defined by default, which can easily be extended:\r\n\r\n```js\r\nvar doctypes = exports.doctypes = {\r\n '5': '',\r\n 'default': '',\r\n 'xml': '',\r\n 'transitional': '',\r\n 'strict': '',\r\n 'frameset': '',\r\n '1.1': '',\r\n 'basic': '',\r\n 'mobile': ''\r\n};\r\n```\r\n\r\nTo alter the default simply change:\r\n\r\n```js\r\njade.doctypes.default = 'whatever you want';\r\n```\r\n\r\n\r\n## Filters\r\n\r\nFilters are prefixed with `:`, for example `:markdown` and\r\npass the following block of text to an arbitrary function for processing. View the _features_\r\nat the top of this document for available filters.\r\n\r\n```jade\r\nbody\r\n :markdown\r\n Woah! jade _and_ markdown, very **cool**\r\n we can even link to [stuff](http://google.com)\r\n```\r\n\r\nRenders:\r\n\r\n```html\r\nWoah! jade and markdown, very cool we can even link to stuff
\r\n```\r\n\r\n\r\n## Code\r\n\r\nJade currently supports three classifications of executable code. The first\r\nis prefixed by `-`, and is not buffered:\r\n\r\n```jade\r\n- var foo = 'bar';\r\n```\r\n\r\nThis can be used for conditionals, or iteration:\r\n\r\n```jade\r\n- for (var key in obj)\r\n p= obj[key]\r\n```\r\n\r\nDue to Jade's buffering techniques the following is valid as well:\r\n\r\n```jade\r\n- if (foo)\r\n ul\r\n li yay\r\n li foo\r\n li worked\r\n- else\r\n p oh no! didnt work\r\n```\r\n\r\nHell, even verbose iteration:\r\n\r\n```jade\r\n- if (items.length)\r\n ul\r\n - items.forEach(function(item){\r\n li= item\r\n - })\r\n```\r\n\r\nAnything you want!\r\n\r\nNext up we have _escaped_ buffered code, which is used to\r\nbuffer a return value, which is prefixed by `=`:\r\n\r\n```jade\r\n- var foo = 'bar'\r\n= foo\r\nh1= foo\r\n```\r\n\r\nWhich outputs `barWelcome to my super lame site.
\r\n \r\n \r\n\r\n```\r\n\r\nAs mentioned `include` can be used to include other content\r\nsuch as html or css. By providing an extension, Jade will\r\nread that file in, apply any [filter](#a7) matching the file's\r\nextension, and insert that content into the output.\r\n\r\n```jade\r\nhtml\r\n head\r\n //- css and js have simple filters that wrap them in\r\n