86 lines
1.7 KiB
HTML
86 lines
1.7 KiB
HTML
|
<h2>Comments</h2>
|
||
|
|
<pre><code>// Some
|
||
|
|
multiline
|
||
|
|
comment !
|
||
|
|
|
||
|
|
// This is a comment
|
||
|
|
But this is not</code></pre>
|
||
|
|
|
||
|
|
<h2>Doctype</h2>
|
||
|
|
<pre><code>doctype html
|
||
|
|
doctype 1.1
|
||
|
|
doctype html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"</code></pre>
|
||
|
|
|
||
|
|
<h2>Tags</h2>
|
||
|
|
<pre><code>ul
|
||
|
|
li Item A
|
||
|
|
li Item B
|
||
|
|
li Item C
|
||
|
|
foo(bar='baz')/
|
||
|
|
input(type='checkbox', checked=true.toString())
|
||
|
|
#content
|
||
|
|
div#foo(data-bar="foo")&attributes({'data-foo': 'bar'})</code></pre>
|
||
|
|
|
||
|
|
<h2>Markup</h2>
|
||
|
|
<pre><code><div class="foo bar"></div></code></pre>
|
||
|
|
|
||
|
|
<h2>Control flow</h2>
|
||
|
|
<pre><code>#user
|
||
|
|
if user.description
|
||
|
|
p.description= user.description
|
||
|
|
else if authorised
|
||
|
|
p.description.
|
||
|
|
User has no description,
|
||
|
|
why not add one...
|
||
|
|
else
|
||
|
|
p.description User has no description
|
||
|
|
ul
|
||
|
|
each val in [1, 2, 3, 4, 5]
|
||
|
|
li= val
|
||
|
|
case friends
|
||
|
|
when 0
|
||
|
|
p you have no friends
|
||
|
|
when 1
|
||
|
|
p you have a friend
|
||
|
|
default
|
||
|
|
p you have #{friends} friends
|
||
|
|
</code></pre>
|
||
|
|
|
||
|
|
<h2>Inline JavaScript</h2>
|
||
|
|
<pre><code>script alert('test');
|
||
|
|
script(type="text/javascript").
|
||
|
|
alert('foo');
|
||
|
|
alert('bar');
|
||
|
|
- var classes = ['foo', 'bar', 'baz']
|
||
|
|
- for (var x = 0; x < 3; x++)
|
||
|
|
li item
|
||
|
|
</code></pre>
|
||
|
|
|
||
|
|
<h2>Keywords</h2>
|
||
|
|
<pre><code>include ./includes/head.pug
|
||
|
|
extends ./layout.pug
|
||
|
|
block content
|
||
|
|
append head</code></pre>
|
||
|
|
|
||
|
|
<h2>Mixins</h2>
|
||
|
|
<pre><code>mixin list
|
||
|
|
ul
|
||
|
|
li foo
|
||
|
|
li bar
|
||
|
|
li baz
|
||
|
|
+list
|
||
|
|
mixin pet(name)
|
||
|
|
li.pet= name
|
||
|
|
ul
|
||
|
|
+pet('cat')
|
||
|
|
+pet('dog')
|
||
|
|
</code></pre>
|
||
|
|
|
||
|
|
<h2>Filters</h2>
|
||
|
|
<p>Filters require the desired language to be loaded.
|
||
|
|
On this page, check CoffeeScript <strong>before</strong> checking Pug should make
|
||
|
|
the example below work properly.</p>
|
||
|
|
<pre><code>script
|
||
|
|
:coffee
|
||
|
|
console.log 'This is coffee script'</code></pre>
|