wahoo!
`. well cool, but how about large bodies of text: ```jade p | foo bar baz | rawr rawr | super cool | go jade go ``` renders `foo bar baz rawr.....
` interpolation? yup! both types of text can utilize interpolation, if we passed `{ name: 'tj', email: 'tj@vision-media.ca' }` to the compiled function we can do the following: ```jade #user #{name} <#{email}> ``` outputs `#{something}
` We can also utilize the unescaped variant `!{html}`, so the following will result in a literal script tag: ```jade - var html = "" | !{html} ``` Nested tags that also contain text can optionally use a text block: ```jade label | Username: input(name='user[name]') ``` or immediate tag text: ```jade label Username: input(name='user[name]') ``` As an alternative, we may use a trailing `.` to indicate a text block, for example: ```jade p. foo asdf asdf asdfasdfaf asdf asd. ``` outputs: ```htmlfoo asdf asdf asdfasdfaf asdf asd.
``` This 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: ```jade p . ``` outputs: ```html.
``` It should be noted that text blocks should be doubled escaped. For example if you desire the following output. ```htmlfoo\bar
``` use: ```jade p. foo\\bar ``` ### Comments Single line comments currently look the same as JavaScript comments, aka `//` and must be placed on their own line: ```jade // just some paragraphs p foo p bar ``` would output ```htmlfoo
bar
``` Jade also supports unbuffered comments, by simply adding a hyphen: ```jade //- will not output within markup p foo p bar ``` outputting ```htmlfoo
bar
``` ### Block Comments A block comment is legal as well: ```jade body // #content h1 Example ``` outputting ```html ``` Jade supports conditional-comments as well, for example: ```jade head //if lt IE 8 script(src='/ie-sucks.js') ``` outputs: ```html ``` ### Nesting Jade supports nesting to define the tags in a natural way: ```jade ul li.first a(href='#') foo li a(href='#') bar li.last a(href='#') baz ``` ### Block Expansion Block expansion allows you to create terse single-line nested tags, the following example is equivalent to the nesting example above. ```jade ul li.first: a(href='#') foo li: a(href='#') bar li.last: a(href='#') baz ``` ### Case The case statement takes the following form: ```jade html body friends = 10 case friends when 0 p you have no friends when 1 p you have a friend default p you have #{friends} friends ``` Block expansion may also be used: ```jade friends = 5 html body case friends when 0: p you have no friends when 1: p you have a friend default: p you have #{friends} friends ``` ### Attributes Jade currently supports `(` and `)` as attribute delimiters. ```jade a(href='/login', title='View login page') Login ``` When a value is `undefined` or `null` the attribute is _not_ added, so this is fine, it will not compile `something="null"`. ```jade div(something=null) ``` Boolean attributes are also supported: ```jade input(type="checkbox", checked) ``` Boolean attributes with code will only output the attribute when `true`: ```jade input(type="checkbox", checked=someValue) ``` Multiple lines work too: ```jade input(type='checkbox', name='agreement', checked) ``` Multiple lines without the comma work fine: ```jade input(type='checkbox' name='agreement' checked) ``` Funky whitespace? fine: ```jade input( type='checkbox' name='agreement' checked) ``` Colons work: ```jade rss(xmlns:atom="atom") ``` Suppose we have the `user` local `{ id: 12, name: 'tobi' }` and we wish to create an anchor tag with `href` pointing to "/user/12" we could use regular javascript concatenation: ```jade a(href='/user/' + user.id)= user.name ``` or we could use jade's interpolation, which I added because everyone using Ruby or CoffeeScript seems to think this is legal js..: ```jade a(href='/user/#{user.id}')= user.name ``` The `class` attribute is special-cased when an array is given, allowing you to pass an array such as `bodyClasses = ['user', 'authenticated']` directly: ```jade body(class=bodyClasses) ``` ### HTML Inline html is fine, we can use the pipe syntax to write arbitrary text, in this case some html: ```jade html body |foo bar baz
``` Or we can use the trailing `.` to indicate to Jade that we only want text in this block, allowing us to omit the pipes: ```jade html body.foo bar baz
``` Both of these examples yield the same result: ```htmlfoo bar baz
``` The same rule applies for anywhere you can have text in jade, raw html is fine: ```jade html body h1 User #{name} ``` ### Doctypes To add a doctype simply use `!!!`, or `doctype` followed by an optional value: ```jade !!! ``` or ```jade doctype ``` Will output the _html 5_ doctype, however: ```jade !!! transitional ``` Will output the _transitional_ doctype. Doctypes are case-insensitive, so the following are equivalent: ```jade doctype Basic doctype basic ``` it's also possible to simply pass a doctype literal: ```jade doctype html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" ``` yielding: ```html ``` Below are the doctypes defined by default, which can easily be extended: ```js var doctypes = exports.doctypes = { '5': '', 'default': '', 'xml': '', 'transitional': '', 'strict': '', 'frameset': '', '1.1': '', 'basic': '', 'mobile': '' }; ``` To alter the default simply change: ```js jade.doctypes.default = 'whatever you want'; ``` ## Filters Filters are prefixed with `:`, for example `:markdown` and pass the following block of text to an arbitrary function for processing. View the _features_ at the top of this document for available filters. ```jade body :markdown Woah! jade _and_ markdown, very **cool** we can even link to [stuff](http://google.com) ``` Renders: ```htmlWoah! jade and markdown, very cool we can even link to stuff
``` ## Code Jade currently supports three classifications of executable code. The first is prefixed by `-`, and is not buffered: ```jade - var foo = 'bar'; ``` This can be used for conditionals, or iteration: ```jade - for (var key in obj) p= obj[key] ``` Due to Jade's buffering techniques the following is valid as well: ```jade - if (foo) ul li yay li foo li worked - else p oh no! didnt work ``` Hell, even verbose iteration: ```jade - if (items.length) ul - items.forEach(function(item){ li= item - }) ``` Anything you want! Next up we have _escaped_ buffered code, which is used to buffer a return value, which is prefixed by `=`: ```jade - var foo = 'bar' = foo h1= foo ``` Which outputs `barWelcome to my super lame site.
``` As mentioned `include` can be used to include other content such as html or css. By providing an explicit filter name with `include:`, Jade will read that file in, apply the [filter](#a7), and insert that content into the output. ```jade html head //- css and js have simple filters that wrap them in