/scalate-website/src/documentation/jade.page
Visualforce Page | 115 lines | 93 code | 22 blank | 0 comment | 0 complexity | cc5403f7944de2e92edee1b2c734b567 MD5 | raw file
1--- 2title: Jade Reference 3--- name:overview 4# Jade Reference Guide 5Jade is the daddy of HTML template engines for Scala 6 7--- name:content pipeline:markdown 8 9[Jade](http://jade-lang.com/) is a [neater](jade-syntax.html) dialect of [Haml](http://haml-lang.com/) / [Scaml](scaml-reference.html) which is a very DRY template language for creating HTML markup. 10 11Here's a simple Jade example 12 13{pygmentize_and_compare::} 14----------------------------- 15jade: An example .jade file 16----------------------------- 17!!! 5 18html(lang="en") 19 head 20 title= pageTitle 21 :javascript 22 if (foo) { 23 bar() 24 } 25 body 26 h1 Jade - node template engine 27 #container 28 - if (youAreUsingJade) 29 p You are amazing 30 - else 31 p Get on it! 32 :coffeescript 33 alert "Hello, Coffee!" 34----------------------------- 35xml: the generated HTML 36----------------------------- 37<!DOCTYPE html> 38<html lang="en"> 39 <head> 40 <title>Jade</title> 41 <script type="text/javascript"> 42 //<![CDATA[ 43 if (foo) { 44 bar() 45 } 46 //]]> 47 </script> 48 </head> 49 <body> 50 <h1>Jade - node template engine</h1> 51 <div id="container"> 52 <p>You are amazing</p> 53 </div> 54 <script type='text/javascript'> 55 //<![CDATA[ 56 (function() { 57 alert("Hello, Coffee!"); 58 }).call(this); 59 60 //]]> 61 </script> 62 </body> 63</html> 64{pygmentize_and_compare} 65 66If you already know [Haml](http://haml-lang.com/) / [Scaml](scaml-reference.html) then Jade which basically avoids the use of % before element names making things a little easier to read; then for text content on a new line you either prefix the text with the **|** symbol or you use a markup format like markdown. 67 68If you don't know [Haml](http://haml-lang.com/) / [Scaml](scaml-reference.html), please refer to the [Jade Syntax](jade-syntax.html). 69 70## Markdown and Jade rock 71 72Jade and markdown are the perfect couple for your HTML templating needs; Jade provides the very DRY and concise HTML markup using concise CSS aware markup, markdown provides the wiki formatting of text blocks. 73 74Jade by itself is great for structural markup and layouts but is not always optimal for lots of text with embedded markup like bold and hyperlinks. 75 76Here's an example of some text markup with hyperlinks using vanilla jade 77 78{pygmentize:: jade} 79.foo 80 p 81 | This is some 82 b text 83 | with a 84 a(href="http://fusesource.com") FuseSource 85 | link. 86{pygmentize} 87 88Now lets use [markdown](http://daringfireball.net/projects/markdown/) - which is great for concise DRY text with markup effects and embedded links.. 89 90{pygmentize:: jade} 91.foo 92 :markdown 93 This is some **text** with a [FuseSource](http://fusesource.com) link. 94{pygmentize} 95 96Both of which should generate something like this 97 98{pygmentize:: xml} 99<div class="foo"> 100 <p> 101 This is some <b>text</b> with a <a href="http://fusesource.com">FuseSource</a> link. 102 </p> 103</div> 104{pygmentize} 105 106 107## See Also 108 109* [Jade Syntax](jade-syntax.html) 110* [Markdown Syntax](http://daringfireball.net/projects/markdown/syntax) 111* [User Guide](user-guide.html) 112* [Documentation](index.html) 113 114 115