dev-master
9999999-devJade of Maht0rz / pagon version had broken ? regex, so i edited it a bit!
MIT
The Requires
- php >=5.3.0
by Corrie Zhao
template jade jade.php
Jade of Maht0rz / pagon version had broken ? regex, so i edited it a bit!
Jade is a high performance template compiler heavily influenced by Haml and implemented for PHP 5.3., (*1)
$dumper = new PHPDumper(); $dumper->registerVisitor('tag', new AutotagsVisitor()); $dumper->registerFilter('javascript', new JavaScriptFilter()); $dumper->registerFilter('cdata', new CDATAFilter()); $dumper->registerFilter('php', new PHPFilter()); $dumper->registerFilter('style', new CSSFilter()); // Initialize parser & Jade $parser = new Parser(new Lexer()); $jade = new Jade($parser, $dumper); // Parse a template (both string & file containers) echo $jade->render($template);
CRLF and CR are converted to LF before parsing., (*2)
Jade is indentation based, however currently only supports a 2 space indent., (*3)
A tag is simply a leading word:, (*4)
html
for example is converted to <html></html>
, (*5)
tags can also have ids:, (*6)
div#container
which would render <div id="container"></div>
, (*7)
how about some classes?, (*8)
div.user-details
renders <div class="user-details"></div>
, (*9)
multiple classes? and an id? sure:, (*10)
div#foo.bar.baz
renders <div id="foo" class="bar baz"></div>
, (*11)
div div div sure is annoying, how about:, (*12)
#foo .bar
which is syntactic sugar for what we have already been doing, and outputs:, (*13)
<div id="foo"></div><div class="bar"></div>
jade.php has a feature, called "autotags". It's just snippets for tags. Autotags will expand to basic tags with custom attributes. For example:, (*14)
input:text
will expand to <input type="text" />
& it's the same as input( type="text" )
, but shorter.
Another examples:, (*15)
input:submit( value="Send" )
will become <input type="submit" value="Send" />
., (*16)
You can even add you own autotags with:, (*17)
$parser->setAutotag('input:progress', 'input', array('type'=>'text', class=>'progress-bar'));
that will expands to <input type="text" class="progress-bar" />
., (*18)
It also supports new HTML5 tags (input:email
=> <input type="email"/>
)., (*19)
Simply place some content after the tag:, (*20)
p wahoo!
renders <p>wahoo!</p>
., (*21)
well cool, but how about large bodies of text:, (*22)
p | foo bar baz | rawr rawr | super cool | go Jade go
renders <p>foo bar baz rawr.....</p>
, (*23)
Actually want <?php echo ... ?>
for some reason? Use {{}}
instead:, (*24)
p {{$something}}
now we have <p><?php echo $something ?></p>
, (*25)
ul li one li two li three
Jade currently supports '(' and ')' as attribute delimiters., (*26)
a(href='/login', title='View login page') Login
Alternatively we may use the colon to separate pairs:, (*27)
a(href: '/login', title: 'View login page') Login
Boolean attributes are also supported:, (*28)
input(type="checkbox", checked)
Boolean attributes with code will only output the attribute when true
:, (*29)
input(type="checkbox", checked: someValue)
Note: Leading / trailing whitespace is ignore for attr pairs., (*30)
To add a doctype simply use !!!
followed by an optional value:, (*31)
!!!
Will output the transitional doctype, however:, (*32)
!!! 5
Will output html 5's doctype. Below are the doctypes defined by default, which can easily be extended:, (*33)
$doctypes = array( '5' => '<!DOCTYPE html>', 'xml' => '<?xml version="1.0" encoding="utf-8" ?>', 'default' => '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">', 'transitional' => '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">', 'strict' => '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">', 'frameset' => '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">', '1.1' => '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">', 'basic' => '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">', 'mobile' => '<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">' );
Jade supports sharp comments (//- COMMENT
). So jade block:, (*34)
//- JADE - $foo = "<script>"; p //- ##### COMMENTS ARE SUPPER! ###### - switch ($foo) -case 2 p.foo= $foo //- - case 'strong' //- strong#name= $foo * 2 - case 5 p some text
will be compiled into:, (*35)
<?php $foo = "<script>"; ?> <p> <?php switch ($foo) ?> <?php case 2 ?> <p class="foo"><?php echo $foo ?></p> <?php break; ?> <?php case 5 ?> <p>some text</p> <?php break; ?> <?php endswitch; ?> </p>
Jade supports HTML comments (// comment
). So block:, (*36)
peanutbutterjelly // This is the peanutbutterjelly element | I like sandwiches!
will become:, (*37)
<peanutbutterjelly> <!-- This is the peanutbutterjelly element --> I like sandwiches! </peanutbutterjelly>
As with multiline comments:, (*38)
// p This doesn't render... div h1 Because it's commented out!
that compile to:, (*39)
<!-- <p>This doesn't render...</p> <div> <h1>Because it's commented out!</h1> </div> -->
Also, Jade supports IE conditional comments, so:, (*40)
// [if IE] a( href = 'http://www.mozilla.com/en-US/firefox/' ) h1 Get Firefox
will be parsed to:, (*41)
<!--[if IE]> <a href="http://www.mozilla.com/en-US/firefox/"> <h1>Get Firefox</h1> </a> <![endif]-->
Filters are prefixed with :
, for example :javascript
or :cdata
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., (*42)
body :php | $data = 40; | $data /= 2; | echo $data;
Renders:, (*43)
<body> <?php $data = 40; $data /= 2; echo $data; ?> </body>
Jade currently supports two classifications of executable code. The first
is prefixed by -
, and is not buffered:, (*44)
- var $foo = 'bar';
This can be used for conditionals, or iteration:, (*45)
- foreach ($items as $item): p= $item
Due to Jade's buffering techniques the following is valid as well:, (*46)
- if ($foo): ul li yay li foo li worked - else: p hey! didnt work
Second is echoed code, which is used to
echo a return value, which is prefixed by =
:, (*47)
- $foo = 'bar' = $foo h1= $foo
Which outputs, (*48)
<?php $foo = 'bar' ?> <?php echo $foo ?> <h1><?php echo $foo ?></h1>
Also, Jade has Code Blocks, that supports basic PHP template syntax:, (*49)
ul - while (true): li item
Will be rendered to:, (*50)
<ul> <?php while (true): ?> <li>item</li> <?php endwhile; ?> </ul>
But don't forget about colons :
after instructions start (- if(true) :
)., (*51)
There's bunch of default ones: if
, else
, elseif
, while
, for
, foreach
, switch
, case
., (*52)
Jade of Maht0rz / pagon version had broken ? regex, so i edited it a bit!
MIT
template jade jade.php