-
Notifications
You must be signed in to change notification settings - Fork 125
/
index.html
77 lines (74 loc) · 10.4 KB
/
index.html
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
<!DOCTYPE html><html><head><title>Jade Template Syntax Documentation by Example</title><link href="assets/global.min.css" rel="stylesheet" type="text/css"><meta name="description" content="An interative Syntax Documentation for the Jade Templating Engine"><link rel="author" href="https://plus.google.com/u/0/113306279128990179378"><script>WebFontConfig = {
google: { families: [ 'Droid+Sans+Mono::latin', 'Ubuntu:400,700:latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();</script></head><body data-spy="scroll" data-target=".subnav" data-offset="150"><a href="https://github.com/naltatis/jade-syntax-docs"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a><div class="container"><header class="jumbotron subhead"><h1>Jade Syntax Documentation<small> by example</small></h1><p class="lead">This <strong>interactive</strong> documentation illustrates the most important features of the Jade templating language.<br>
You can play around with the examples and watch the html output in real time.<br>
For more detailed explanations visit the <a href="http://jade-lang.com/reference/">official documentation.</a></p><div class="subnav"><ul class="nav nav-pills"><li><a href="#basics">Basics</a></li><li><a href="#id-classes">id, classes</a></li><li><a href="#nesting">Nesting</a></li><li><a href="#text">Text</a></li><li><a href="#variables">Variables</a></li><li><a href="#escaping">Escaping</a></li><li><a href="#attributes">Attributes</a></li><li><a href="#comments">Comments</a></li><li><a href="#if">if, unless</a></li><li><a href="#for">for, each</a></li><li><a href="#case">case</a></li><li><a href="#mixin">mixin</a></li><li><a href="#about">about</a></li></ul></div></header><section id="basics"><div class="page-header"><h2>Basics</h2></div><div class="row"><div class="span6"><div class="jadeLabel"></div><textarea class="size7 jade">doctype html
html
head
title my jade template
body
h1 Hello #{name}</textarea><textarea class="size1 json">{"name": "Bob"}</textarea><div class="dataLabel"></div></div><div class="span6 right"><div class="htmlLabel"></div><textarea readonly class="size9 html"></textarea></div></div></section><section id="id-classes"><div class="page-header"><h2>id & classes</h2></div><div class="row"><div class="span6"><textarea class="size5 jade">#content
.block
input#bar.foo1.foo2</textarea></div><div class="span6 right"><textarea readonly class="size5 html"></textarea></div></div></section><section id="nesting"><div class="page-header"><h2>Nesting</h2></div><div class="row"><div class="span6"><textarea class="size5 jade">ul#books
li
a(href="#book-a") Book A
li
a(href="#book-b") Book B</textarea></div><div class="span6 right"><textarea readonly class="size5 html"></textarea></div></div><hr><div class="row"><div class="span6"><textarea class="size4 jade">ul#books
li: a(href="#book-a") Book A
li: a(href="#book-b") Book B</textarea></div><div class="span6 right"><textarea readonly class="size4 html"></textarea></div></div></section><section id="text"><div class="page-header"><h2>Text</h2></div><div class="row"><div class="span6"><textarea class="size3 jade">h1 foo
h2= book.name
h3 "#{book.name}" for #{book.price} €</textarea><textarea class="size1 json">{"book": {"name": "Hello", "price": 12.99}}</textarea></div><div class="span6 right"><textarea readonly class="size5 html"></textarea></div></div><hr><div class="row"><div class="span6"><textarea class="size4 jade">p
| foo bar
| hello world</textarea></div><div class="span6 right"><textarea readonly class="size4 html"></textarea></div></div><hr><div class="row"><div class="span6"><textarea class="size4 jade">p.
foo bar
hello world</textarea></div><div class="span6 right"><textarea readonly class="size4 html"></textarea></div></div></section><section id="variables"><div class="page-header"><h2>Variables</h2></div><div class="row"><div class="span6"><textarea class="size2 jade">- var foo = "hello world"
h1= foo</textarea></div><div class="span6 right"><textarea readonly class="size2 html"></textarea></div></div><hr><div class="row"><div class="span6"><textarea class="size2 jade">- var foo = book.name + " world"
h1= foo</textarea><textarea class="size1 json">{"book": {"name": "hello"}}</textarea></div><div class="span6 right"><textarea readonly class="size4 html"></textarea></div></div></section><section id="escaping"><div class="page-header"><h2>Escaping</h2></div><div class="row"><div class="span6"><textarea class="size1 jade">li Hello <em>World</em></textarea></div><div class="span6 right"><textarea readonly class="size1 html"></textarea></div></div><hr><div class="row"><div class="span6"><textarea class="size2 jade">li= name
li!= name</textarea><textarea class="size1 json">{"name": "Hello <em>World</em>"}</textarea></div><div class="span6 right"><textarea readonly class="size4 html"></textarea></div></div><hr><div class="row"><div class="span6"><textarea class="size2 jade">li Say #{name}
li Say !{name}</textarea><textarea class="size1 json">{"name": "Hello <em>World</em>"}</textarea></div><div class="span6 right"><textarea readonly class="size4 html"></textarea></div></div></section><section id="attributes"><div class="page-header"><h2>Attributes</h2></div><div class="row"><div class="span6"><textarea class="size1 jade">input(type="text", placeholder="your name")</textarea></div><div class="span6 right"><textarea readonly class="size1 html"></textarea></div></div><hr><div class="row"><div class="span6"><textarea class="size1 jade">input(type=type, value='Hello #{name}')</textarea><textarea class="size1 json">{"type": "text", "name": "Bob"}</textarea></div><div class="span6 right"><textarea readonly class="size3 html"></textarea></div></div><hr><div class="row"><div class="span6"><textarea class="size1 jade">input(checked=true, disabled=false)</textarea></div><div class="span6 right"><textarea readonly class="size1 html"></textarea></div></div></section><section id="comments"><div class="page-header"><h2>Comments</h2></div><div class="row"><div class="span6"><textarea class="size2 jade">// single line comment
//- invisible single line comment</textarea></div><div class="span6 right"><textarea readonly class="size2 html"></textarea></div></div><hr><div class="row"><div class="span6"><textarea class="size4 jade">// block comment
h1 hello world
//- invisible block comment
h2 how are you?</textarea></div><div class="span6 right"><textarea readonly class="size4 html"></textarea></div></div><hr><div class="row"><div class="span6"><textarea class="size3 jade"><!--[if IE 8]>
script(src='/ie.js')
<![endif]--></textarea></div><div class="span6 right"><textarea readonly class="size2 html"></textarea></div></div></section><section id="if"><div class="page-header"><h2>if & unless</h2></div><div class="row"><div class="span6"><textarea class="size4 jade">if name == "Bob"
h1 Hello Bob
else
h1 My name is #{name}</textarea><textarea class="size1 json">{"name": "Bob"}</textarea></div><div class="span6 right"><textarea readonly class="size6 html"></textarea></div></div><hr><div class="row"><div class="span6"><textarea class="size2 jade">unless errors
p no errors</textarea><textarea class="size1 json">{"errors": false}</textarea></div><div class="span6 right"><textarea readonly class="size4 html"></textarea></div></div></section><section id="for"><div class="page-header"><h2>for & each</h2></div><div class="row"><div class="span6"><textarea class="size3 jade">select
each book, i in books
option(value=i) Book #{book}</textarea><textarea class="size1 json">{"books": ["A", "B", "C"]}</textarea></div><div class="span6 right"><textarea readonly class="size5 html"></textarea></div></div><hr><div class="row"><div class="span6"><textarea class="size5 jade">ul
for book in books
li= book
else
li sorry, no books!</textarea><textarea class="size1 json">{"books": []}</textarea></div><div class="span6 right"><textarea readonly class="size7 html"></textarea></div></div></section><section id="case"><div class="page-header"><h2>case</h2></div><div class="row"><div class="span6"><textarea class="size7 jade">case name
when "Bob"
p Hi Bob!
when "Alice"
p Howdy Alice!
default
p Hello #{name}!</textarea><textarea class="size1 json">{"name": "Bob"}</textarea></div><div class="span6 right"><textarea readonly class="size9 html"></textarea></div></div></section><section id="mixin"><div class="page-header"><h2>mixin</h2></div><div class="row"><div class="span6"><textarea class="size6 jade">mixin book(name, price)
li #{name} for #{price} €
ul#books
+book("Book A", 12.99)
+book("Book B", 5.99)</textarea></div><div class="span6 right"><textarea readonly class="size6 html"></textarea></div></div><hr><div class="row"><div class="span6"><textarea class="size6 jade">mixin book(name)
div&attributes(attributes)= name
+book("Book A")#first
+book("Book B")(title="book b")
+book("Book C").last</textarea></div><div class="span6 right"><textarea readonly class="size6 html"></textarea></div></div></section></div><footer id="about"><p>by <strong>naltatis</strong> </p><p>follow me on <a href="https://github.com/naltatis" title="naltatis on github">github</a> and <a href="https://twitter.com/naltatis" title="naltatis on twitter">twitter</a></p><p><a class="FlattrButton"><script id='fb7pp5j'>(function(i){var f,s=document.getElementById(i);f=document.createElement('iframe');f.src='//api.flattr.com/button/view/?uid=tatilans&button=compact&url=https%3A%2F%2Fgithub.com%2Fnaltatis%2Fjade-syntax-docs';f.title='Flattr';f.height=20;f.width=110;f.style.borderWidth=0;s.parentNode.insertBefore(f,s);})('fb7pp5j');</script></a></p></footer><script src="assets/global.min.js" async></script><script type="text/javascript">var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33399084-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();</script></body></html>