1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
doctype html
html
title TODO supply a title
body
- var user = { description: 'foo bar baz' }
- var authorised = true
#user
unless false
p You're logged in as #{user.name}
if false
h2 Description
p.description= user.description
else if authorised
h2 Description
p.description.
User has no description,
why not add one...
else
h1 Description
p.description User has no description
ul
- for (var x = 0; x < 3; x++)
li item is #{x}
p
= 'This code is <escaped>!'
p= 'This code is' + ' <escaped>!'
p
!= 'This code is <strong>not</strong> escaped!'
p!= 'This code is <strong>not</strong> escaped!'
a(href='google.com') Google
a(class='button', href='google.com') Google
- var authenticated = true
div(class=authenticated ? 'authed' : 'anon')
input(
type='checkbox'
name='agreement'
checked
)
div(data-escaped="<code>")
div(data-unescaped!="<code>")
input(type='checkbox', checked)
input(type='checkbox', checked=true)
input(type='checkbox', checked=false)
input(type='checkbox', checked=true.toString())
input(type='checkbox', checked=true && 'checked')
div
a(style={color: 'red', background: 'green'})
a(style={color: 'red',
background: 'green'})
a(style={color: 'red',
background: 'green'})
- var classes = ['foo', 'bar', 'baz']
a(class=classes)
// the class attribute may also be repeated to merge arrays
^
a.bing(class=classes class=['bing'])
- var currentUrl = '/about'
div
a(class={active: currentUrl === '/'} href='/') Home
a(class={active: currentUrl === '/about'} href='/about') About
a.button
.content
#just.foo [nic=1]
#caramba
- var pokus = 10
- var friends = pokus
case friends
when 0
p you have no friends
when 1
p you have a friend
default
p you have #{friends} friends
#a
- var justtest = 0
case justtest
when 0
when 1
p you have very few friends
default
p you have #{justtest} friends
- var ee = 1
case ee
when 0: p you have no friends
when 2: p you hav&nbps;e a friend
default: code you have #{friends} friends
// just some paragraphs
p foo
p bar
//- will not output within markup
s
uyhhh
llllll
p foo
<!--[if IE 8]>
div
<!--<![endif]-->
p bar
div#foo(data-bar="foo")&attributes({'data-foo': 'bar'})
:markdown
# Markdown
I often like including markdown documents. #{friends}
script
:coffee
console.log 'This is coffee script#{friends}'
extends ./layout.jade
block title
title Article Title
p.
If you take a look at this page's source #[a(target="_blank", href="https://github.com/jadejs/jade/blob/master/docs/views/reference/interpolation.jade") on GitHub],
you'll see several places where the tag interpolation operator is
used, like so.
block content
h1 My Article
include:markdown article.md
include ./includes/foot.jade
script
include script.js
//
As much text as you want
z
can go here.
|
