jade

<html> <head> <title>Jade</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <style>body { margin: 0; padding: 0; font: 14px/1.5 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; color: #252519; } a { color: #252519; } a:hover { text-decoration: underline; color: #19469D; } p { margin: 12px 0; } h1, h2, h3 { margin: 0; padding: 0; } table#source { width: 100%; border-collapse: collapse; } table#source td:first-child { padding: 30px 40px 30px 40px; vertical-align: top; } table#source td:first-child, table#source td:first-child pre { width: 450px; } table#source td:last-child { padding: 30px 0 30px 40px; border-left: 1px solid #E5E5EE; background: #F5F5FF; } table#source tr { border-bottom: 1px solid #E5E5EE; } table#source tr.filename { padding-top: 40px; border-top: 1px solid #E5E5EE; } table#source tr.filename td:first-child { text-transform: capitalize; } table#source tr.filename td:last-child { font-size: 12px; } table#source tr.filename h2 { margin: 0; padding: 0; cursor: pointer; } table#source tr.code h1, table#source tr.code h2, table#source tr.code h3 { margin-top: 30px; font-family: "Lucida Grande", "Helvetica Nueue", Arial, sans-serif; font-size: 18px; } table#source tr.code h2 { font-size: 16px; } table#source tr.code h3 { font-size: 14px; } table#source tr.code ul { margin: 15px 0 15px 35px; padding: 0; } table#source tr.code ul li { margin: 0; padding: 1px 0; } table#source tr.code ul li p { margin: 0; padding: 0; } table#source tr.code td:first-child pre { padding: 20px; } #ribbon { position: fixed; top: 0; right: 0; } code .string { color: #219161; } code .regexp { color: #219161; } code .keyword { color: #954121; } code .number { color: #19469D; } code .comment { color: #bbb; } code .this { color: #19469D; }</style> <script> $(function(){ $('tr.code').hide(); $('tr.filename').toggle(function(){ $(this).nextUntil('.filename').fadeIn(); }, function(){ $(this).nextUntil('.filename').fadeOut(); }); }); </script> </head> <body> <table id="source"><tbody><tr><td><h1>Jade</h1>Jade is a high performance template engine for <a href="http://nodejs.org">node</a>, inspired by <a href="http://haml-lang.com/">haml</a>, created by <a href="http://github.com/visionmedia">TJ Holowaychuk</a>.</td><td></td></tr><tr class="filename"><td><h2 id="lib/jade.js"><a href="#">jade</a></h2></td><td>lib/jade.js</td></tr><tr class="code"> <td class="docs"> Library version. </td> <td class="code"> <pre><code>exports.version = '0.2.2';</code></pre> </td> </tr> <tr class="code"> <td class="docs"> Module dependencies. </td> <td class="code"> <pre><code>var sys = require('sys'), fs = require('fs');</code></pre> </td> </tr> <tr class="code"> <td class="docs"> Intermediate JavaScript cache. <ul><li>type: Object</li></ul> </td> <td class="code"> <pre><code>var cache = exports.cache = {};</code></pre> </td> </tr> <tr class="code"> <td class="docs"> Self closing tags. <ul><li>type: Object</li></ul> </td> <td class="code"> <pre><code>var selfClosing = exports.selfClosing = [ 'meta', 'img', 'link', 'br', 'hr', 'input', 'area', 'base' ];</code></pre> </td> </tr> <tr class="code"> <td class="docs"> Default supported doctypes. <ul><li>type: Object</li></ul> </td> <td class="code"> <pre><code>var doctypes = exports.doctypes = { '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">' };</code></pre> </td> </tr> <tr class="code"> <td class="docs"> Filters. <ul><li>type: Object</li></ul> </td> <td class="code"> <pre><code>var filters = exports.filters = {</code></pre> </td> </tr> <tr class="code"> <td class="docs"> Wrap text with CDATA block. </td> <td class="code"> <pre><code>cdata: function(str){ return '<![CDATA[\\n' + str + '\\n]]>'; },</code></pre> </td> </tr> <tr class="code"> <td class="docs"> Wrap text with script and CDATA tags. </td> <td class="code"> <pre><code>javascript: function(str){ return '<script type="text/javascript">\\n//<![CDATA[\\n' + str + '\\n//]]></script>'; },</code></pre> </td> </tr> <tr class="code"> <td class="docs"> Transform sass to css, wrapped in style tags. </td> <td class="code"> <pre><code>sass: function(str){ str = str.replace(/\\n/g, '\n'); var sass = require('sass').render(str).replace(/\n/g, '\\n'); return '<style>' + sass + '</style>'; },</code></pre> </td> </tr> <tr class="code"> <td class="docs"> Transform sass to css, wrapped in style tags. </td> <td class="code"> <pre><code>less: function(str){ var less; str = str.replace(/\\n/g, '\n'); require('less').render(str, function(err, css){ less = '<style>' + css.replace(/\n/g, '\\n') + '</style>'; }); return less; },</code></pre> </td> </tr> <tr class="code"> <td class="docs"> Transform markdown to html. </td> <td class="code"> <pre><code>markdown: function(str){ var md = require('markdown'); str = str.replace(/\\n/g, '\n'); return (md.toHTML ? md.toHTML(str) : md.parse(str)).replace(/\n/g, '\\n').replace(/'/g,'&#39;'); } };</code></pre> </td> </tr> <tr class="code"> <td class="docs"> Initialize jade parser with the given input string. <h2></h2> <ul><li>param: String str</li><li>param: String filename</li><li>api: public</li></ul> </td> <td class="code"> <pre><code>function Parser(str, filename){ this.input = str.replace(/\r\n|\r/g, '\n'); this.filename = filename; this.deferredTokens = []; this.lastIndents = 0; this.lineno = 1; }</code></pre> </td> </tr> <tr class="code"> <td class="docs"> Parser prototype. </td> <td class="code"> <pre><code>Parser.prototype = {</code></pre> </td> </tr> <tr class="code"> <td class="docs"> Generate token object. </td> <td class="code"> <pre><code>function token(type){ self.input = self.input.substr(captures[0].length); return { type: type, line: self.lineno, val: captures[1] }; } // EOS if (!this.input.length) { if (this.lastIndents-- &gt; 0) { return { type: 'outdent', line: this.lineno }; } else { return { type: 'eos', line: this.lineno }; } } // Tag if (captures = /^(\w[:\w]*)/.exec(this.input)) { return token('tag'); } // Filter if (captures = /^:(\w+)/.exec(this.input)) { return token('filter'); } // Each if (captures = /^- *each *(\w+)(?: *, *(\w+))? * in *([^\n]+)/.exec(this.input)) { var tok = token('each'); tok.val = captures[1]; tok.key = captures[2] || 'index'; tok.code = captures[3]; return tok; } // Code if (captures = /^(!?=|-)([^\n]+)/.exec(this.input)) { var flags = captures[1]; captures[1] = captures[2]; var tok = token('code'); tok.escape = flags[0] === '='; tok.buffer = flags[0] === '=' || flags[1] === '='; return tok; } // Doctype if (captures = /^!!! *(\w+)?/.exec(this.input)) { return token('doctype'); } // Id if (captures = /^#([\w-]+)/.exec(this.input)) { return token('id'); } // Class if (captures = /^\.([\w-]+)/.exec(this.input)) { return token('class'); } // Attributes if (captures = /^$ *(.+) *$/.exec(this.input)) { var tok = token('attrs'), attrs = tok.val.split(/ *, *(?=[\w-]+ *[:=]|[\w-]+ *$)/); tok.attrs = {}; for (var i = 0, len = attrs.length; i &lt; len; ++i) { var pair = attrs[i]; // Support = and : var colon = pair.indexOf(':'), equal = pair.indexOf('='); // Boolean if (colon &lt; 0 &amp;&amp; equal &lt; 0) { var key = pair, val = true; } else { // Split on first = or : var split = equal &gt;= 0 ? equal : colon; if (colon &gt;= 0 &amp;&amp; colon &lt; equal) split = colon; var key = pair.substr(0, split), val = pair.substr(++split, pair.length); } tok.attrs[key.trim().replace(/^['"]|['"]$/g, '')] = val; } return tok; } // Indent if (captures = /^\n( *)/.exec(this.input)) { ++this.lineno; var tok = token('indent'), indents = tok.val.length / 2; if (this.input[0] === '\n') { tok.type = 'newline'; return tok; } else if (indents % 1 !== 0) { throw new Error('Invalid indentation, got ' + tok.val.length + ' space' + (tok.val.length &gt; 1 ? 's' : '') + ', must be a multiple of two.'); } else if (indents === this.lastIndents) { tok.type = 'newline'; } else if (indents &gt; this.lastIndents + 1) { throw new Error('Invalid indentation, got ' + indents + ' expected ' + (this.lastIndents + 1) + '.'); } else if (indents &lt; this.lastIndents) { var n = this.lastIndents - indents; tok.type = 'outdent'; while (--n) { this.deferredTokens.push({ type: 'outdent', line: this.lineno }); } } this.lastIndents = indents; return tok; } // Text if (captures = /^(?:\| ?)?([^\n]+)/.exec(this.input)) { return token('text'); } },</code></pre> </td> </tr> <tr class="code"> <td class="docs"> Parse input returning a string of js for evaluation. <h2></h2> <ul><li>return: String </li><li>api: public </li></ul> </td> <td class="code"> <pre><code>parse: function(){ var buf = ['var buf = [];']; while (this.peek.type !== 'eos') { buf.push(this.parseExpr()); } buf.push(&quot;return buf.join('');&quot;); return buf.join('\n'); },</code></pre> </td> </tr> <tr class="code"> <td class="docs"> tag | id | class | text | filter | doctype | each block | code block? | expr newline </td> <td class="code"> <pre><code>parseExpr: function(){ switch (this.peek.type) { case 'tag': return this.parseTag(); case 'doctype': return this.parseDoctype(); case 'filter': return this.parseFilter(); case 'text': return &quot;buf.push('" + interpolate(this.advance.val.replace(/'/g, &quot;\\'")) + " ');&quot;; case 'id': case 'class': var tok = this.advance; this.deferredTokens.push({ val: 'div', type: 'tag', line: this.lineno }); this.deferredTokens.push(tok); return this.parseExpr(); case 'each': return this.parseEach(); case 'code': var tok = this.advance, val = tok.val; var buf = tok.buffer ? 'buf.push(' + (tok.escape ? 'escape(' + val + ')' : val) + ')' : val; return this.peek.type === 'indent' ? buf + '\n(function(){' + this.parseBlock() + '}).call(this);' : buf + ';'; case 'newline': this.advance; return this._ + this.parseExpr(); } },</code></pre> </td> </tr> <tr class="code"> <td class="docs"> doctype </td> <td class="code"> <pre><code>parseDoctype: function(){ var name = this.expect('doctype').val; if (name === '5') this.mode = 'html 5'; return &quot;buf.push(default'] + "');&quot;; },</code></pre> </td> </tr> <tr class="code"> <td class="docs"> filter text </td> <td class="code"> <pre><code>parseFilter: function(){ var name = this.expect('filter').val, filter = filters[name]; if (filter) { var text = interpolate(this.parseTextBlock().replace(/'/g, &quot;\\'&quot;)); return &quot;buf.push('" + filter(text) + "');&quot;; } else { throw new Error('unknown filter ":' + name + '"'); } },</code></pre> </td> </tr> <tr class="code"> <td class="docs"> each block </td> <td class="code"> <pre><code>parseEach: function(){ var each = this.expect('each'); var fn = '(' + iterate .replace(/__obj__/, each.code) .replace(/__val__/g, each.val) .replace(/__key__/g, each.key) .replace(/__block__/g, this.parseBlock()) + ').call(this);'; return fn; },</code></pre> </td> </tr> <tr class="code"> <td class="docs"> indent (text | newline)* outdent </td> <td class="code"> <pre><code>parseTextBlock: function(){ var buf = []; this.expect('indent'); while (this.peek.type === 'text' || this.peek.type === 'newline') { if (this.peek.type === 'newline') { this.advance; buf.push('\\n'); } else { buf.push(this.advance.val); } } this.expect('outdent'); return buf.join(''); },</code></pre> </td> </tr> <tr class="code"> <td class="docs"> indent expr* outdent </td> <td class="code"> <pre><code>parseBlock: function(){ var buf = []; buf.push(this._); this.expect('indent'); while (this.peek.type !== 'outdent') { buf.push(this.parseExpr()); } this.expect('outdent'); return buf.join('\n'); },</code></pre> </td> </tr> <tr class="code"> <td class="docs"> tag (attrs | class | id)* text? (code | block) </td> <td class="code"> <pre><code>parseTag: function(){ var name = this.advance.val, html5 = this.mode === 'html 5', hasAttrs = false, attrBuf = '', codeClass = '', classes = [], attrs = {}, buf = []; // (attrs | class | id)* out: while (1) { switch (this.peek.type) { case 'id': hasAttrs = true; attrs.id = '"' + this.advance.val + '"'; continue; case 'class': hasAttrs = true; classes.push(this.advance.val); continue; case 'attrs': hasAttrs = true; var obj = this.advance.attrs, keys = Object.keys(obj); for (var i = 0, len = keys.length; i &lt; len; ++i) { var key = keys[i], val = obj[key]; if (key === 'class') { codeClass = val; } else { attrs[key] = val === undefined ? true : val; attrs.html5 = html5; } } continue; default: break out; } } // text? if (this.peek.type === 'text') { buf.push(&quot;buf.push('" + interpolate(this.advance.val.replace(/^ */, '').replace(/'/g, &quot;\\'")) + "');&quot;); } // (code | block) switch (this.peek.type) { case 'code': var tok = this.advance; if (tok.buffer) { buf.push('buf.push(' + (tok.escape ? 'escape(' + tok.val + ')' : tok.val) + ');'); } else { buf.push(tok.val + ';'); } break; case 'indent': buf.push(this.parseBlock()); break; } // Build attrs if (hasAttrs) { // Classes if (classes.length) { attrs['class'] = '"' + classes.join(' ') + '"'; } if (codeClass) { if (attrs['class']) { attrs['class'] += ' + " " + (' + codeClass + ')'; } else { attrs['class'] = codeClass; } } // Attributes attrBuf += &quot;' + attrs({ &quot;; var keys = Object.keys(attrs); for (var i = 0, len = keys.length; i &lt; len; ++i) { var key = keys[i], val = attrs[key]; attrBuf += &quot;'" + key + "': &quot; + val + (i === len - 1 ? <span c