Tutorial by Examples

HTML Tag: Tag attributes look similar to html, however their values are just regular JavaScript. a(href='google.com') Google a(class='button', href='google.com') Google Result: <a href="google.com">Google</a><a href="google.com" class="button">G...

By default, all attributes are escaped (replacing special characters with escape sequences) to prevent attacks such as cross site scripting. If you need to use special characters you can use != instead of =. Code: div(escaped="<code>") div(unescaped!="<code>") R...

Boolean attributes are mirrored by Jade, and accept bools, aka true or false. When no value is specified true is assumed. Code: input(type='checkbox', checked) input(type='checkbox', checked=true) input(type='checkbox', checked=false) input(type='checkbox', checked=true.toString()) Result: ...

The style attribute can be a string (like any normal attribute) but it can also be an object, which is handy when parts of the style are generated by JavaScript. Code: a(style={color: 'red', background: 'green'}) Result: <a style="color:red;background:green"></a>

The class attribute can be a string (like any normal attribute) but it can also be an array of class names, which is handy when generated from JavaScript. Code: - var classes = ['foo', 'bar', 'baz'] a(class=classes) //- the class attribute may also be repeated to merge arrays a.bing(class=class...

Classes may be defined using a .classname syntax: Code: a.button Result: <a class="button"></a> Since div's are such a common choice of tag, it is the default if you omit the tag name: Code: .content Result: <div class="content"></div>

IDs may be defined using a #idname syntax: Code: a#main-link Result: <a id="main-link"></a> Since div's are such a common choice of tag, it is the default if you omit the tag name: Code: #content Result: <div id="content"></div>

Pronounced "and attributes", the &attributes syntax can be used to explode an object into attributes of an element. Code: div#foo(data-bar="foo")&attributes({'data-foo': 'bar'}) Result: <div id="foo" data-bar="foo" data-foo="bar">&l...