Jade.php adds inline PHP scripting support to the Jade template compiler.
Due to the existence of several fork of the original project, the intent of this fork is only to keep track of the changes, add new fixes when necessary and shared the source via a personal composer account.
Issues are welcome.
Please check the git commit history for the authoritative list of contributors HERE.
CRLF and CR are converted to LF before parsing.
Jade is indentation based, however currently only supports a 2 space indent.
A tag is simply a leading word:
html
for example is converted to <html></html>
tags can also have ids:
div#container
which would render <div id="container"></div>
how about some classes?
div.user-details
renders <div class="user-details"></div>
multiple classes? and an id? sure:
div#foo.bar.baz
renders <div id="foo" class="bar baz"></div>
div div div sure is annoying, how about:
#foo
.bar
which is syntactic sugar for what we have already been doing, and outputs:
<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:
input:text
will expand to <input type="text" /> & it's the same as input( type="text" ), but shorter.
Another examples:
input:submit( value="Send" )
will become <input type="submit" value="Send" />.
You can even add you own autotags with:
$parser->setAutotag('input:progress', 'input', array('type'=>'text', class=>'progress-bar'));
that will expands to <input type="text" class="progress-bar" />.
It also supports new HTML5 tags (input:email => <input type="email"/>).
Simply place some content after the tag:
p wahoo!
renders <p>wahoo!</p>.
well cool, but how about large bodies of text:
p
| foo bar baz
| rawr rawr
| super cool
| go Jade go
renders <p>foo bar baz rawr.....</p>
Actually want <?php echo ... ?> for some reason? Use {{}} instead:
p {{$something}}
now we have <p><?php echo $something ?></p>
ul
li one
li two
li three
Jade currently supports '(' and ')' as attribute delimiters.
a(href='/login', title='View login page') Login
Alternatively we may use the colon to separate pairs:
a(href: '/login', title: 'View login page') Login
Boolean attributes are also supported:
input(type="checkbox", checked)
Boolean attributes with code will only output the attribute when true:
input(type="checkbox", checked: someValue)
Note: Leading / trailing whitespace is ignore for attr pairs.
To add a doctype simply use !!! followed by an optional value:
!!!
Will output the transitional doctype, however:
!!! 5
Will output html 5's doctype. Below are the doctypes defined by default, which can easily be extended:
$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:
//- 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:
<?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:
peanutbutterjelly
// This is the peanutbutterjelly element
| I like sandwiches!
will become:
<peanutbutterjelly>
<!-- This is the peanutbutterjelly element -->
I like sandwiches!
</peanutbutterjelly>
As with multiline comments:
//
p This doesn't render...
div
h1 Because it's commented out!
that compile to:
<!--
<p>This doesn't render...</p>
<div>
<h1>Because it's commented out!</h1>
</div>
-->
Also, Jade supports IE conditional comments, so:
// [if IE]
a( href = 'http://www.mozilla.com/en-US/firefox/' )
h1 Get Firefox
will be parsed to:
<!--[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.
body
:php
| $data = 40;
| $data /= 2;
| echo $data;
Renders:
<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:
- var $foo = 'bar';
This can be used for conditionals, or iteration:
- foreach ($items as $item):
p= $item
Due to Jade's buffering techniques the following is valid as well:
- 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 =:
- $foo = 'bar'
= $foo
h1= $foo
Which outputs
<?php $foo = 'bar' ?>
<?php echo $foo ?>
<h1><?php echo $foo ?></h1>
Also, Jade has Code Blocks, that supports basic PHP template syntax:
ul
- while (true):
li item
Will be rendered to:
<ul>
<?php while (true): ?>
<li>item</li>
<?php endwhile; ?>
</ul>
But don't forget about colons : after instructions start (- if(true) :).
There's bunch of default ones: if, else, elseif, while, for, foreach, switch, case.