PageRenderTime 24ms CodeModel.GetById 19ms app.highlight 1ms RepoModel.GetById 1ms app.codeStats 1ms

/scalate-website/src/documentation/jade.page

http://github.com/scalate/scalate
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