/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. ---
    2. 

  2. title: Jade Reference
    3. 

  3. --- name:overview
    4. 

  4. # Jade Reference Guide
    5. 

  5. Jade is the daddy of HTML template engines for Scala
    6. 

  6. 

  7. --- name:content pipeline:markdown
    8. 

  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. 

  10. 

  11. Here's a simple Jade example
    12. 

    13. 

  13. {pygmentize_and_compare::}
    14. 

  14. -----------------------------
    15. 

  15. jade: An example .jade file
    16. 

  16. -----------------------------
    17. 

  17. !!! 5
    18. 

  18. html(lang="en")
    19. 

  19.   head
    20. 

  20.     title= pageTitle
    21. 

  21.     :javascript
    22. 

  22.       if (foo) {
    23. 

  23.          bar()
    24. 

  24.       }
    25. 

  25.   body
    26. 

  26.     h1 Jade - node template engine
    27. 

  27.     #container
    28. 

  28.       - if (youAreUsingJade)
    29. 

  29.         p You are amazing
    30. 

  30.       - else
    31. 

  31.         p Get on it!
    32. 

  32.     :coffeescript
    33. 

  33.       alert "Hello, Coffee!"
    34. 

  34. -----------------------------
    35. 

  35. xml: the generated HTML
    36. 

  36. -----------------------------
    37. 

  37. <!DOCTYPE html>
    38. 

  38. <html lang="en">
    39. 

  39.   <head>
    40. 

  40.     <title>Jade</title>
    41. 

  41.     <script type="text/javascript">
    42. 

  42.       //<![CDATA[
    43. 

  43.       if (foo) {
    44. 

  44.       	bar()
    45. 

  45.       }
    46. 

  46.       //]]>
    47. 

  47.     </script>
    48. 

  48.   </head>
    49. 

  49.   <body>
    50. 

  50.     <h1>Jade - node template engine</h1>
    51. 

  51.     <div id="container">
    52. 

  52.       <p>You are amazing</p>
    53. 

  53.     </div>
    54. 

  54.     <script type='text/javascript'>
    55. 

  55.       //<![CDATA[
    56. 

  56.         (function() {
    57. 

  57.           alert("Hello, Coffee!");
    58. 

  58.         }).call(this);
    59. 

  59.         
    60. 

  60.       //]]>
    61. 

  61.     </script>  
    62. 

  62.   </body>
    63. 

  63. </html>
    64. 

  64. {pygmentize_and_compare}
    65. 

  65. 

  66. If 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. 

  67. 

  68. If you don't know [Haml](http://haml-lang.com/) / [Scaml](scaml-reference.html), please refer to the [Jade Syntax](jade-syntax.html).
    69. 

  69.       
    70. 

  70. ## Markdown and Jade rock
    71. 

  71. 

  72. Jade 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. 

  73. 

  74. Jade 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. 

  75. 

  76. Here's an example of some text markup with hyperlinks using vanilla jade
    77. 

    78. 

  78. {pygmentize:: jade}
    79. 

  79. .foo
    80. 

  80.   p
    81. 

  81.     | This is some 
    82. 

  82.     b text 
    83. 

  83.     | with a
    84. 

  84.     a(href="http://fusesource.com") FuseSource
    85. 

  85.     | link.
    86. 

  86. {pygmentize}
    87. 

  87. 

  88. Now lets use [markdown](http://daringfireball.net/projects/markdown/) - which is great for concise DRY text with markup effects and embedded links..
    89. 

  89. 

  90. {pygmentize:: jade}
    91. 

  91. .foo
    92. 

  92.   :markdown
    93. 

  93.     This is some **text** with a [FuseSource](http://fusesource.com) link.    
    94. 

  94. {pygmentize}
    95. 

  95.       
    96. 

  96. Both of which should generate something like this
    97. 

  97. 

  98. {pygmentize:: xml}
    99. 

  99. <div class="foo">
    100. 

  100.   <p>
    101. 

  101.     This is some <b>text</b> with a <a href="http://fusesource.com">FuseSource</a> link.
    102. 

  102.   </p>
    103. 

  103. </div>
    104. 

  104. {pygmentize}
    105. 

  105.     
    106. 

  106.     
    107. 

  107. ## See Also
    108. 

  108. 

  109. * [Jade Syntax](jade-syntax.html)
    110. 

  110. * [Markdown Syntax](http://daringfireball.net/projects/markdown/syntax)
    111. 

  111. * [User Guide](user-guide.html)
    112. 

  112. * [Documentation](index.html)
    113.