slim.md

   1 ---
   2 title: Slim
   3 category: Ruby libraries
   4 layout: 2017/sheet
   5 prism_languages: [jade]
   6 weight: -1
   7 ---
   8
   9 ### Example
  10
  11 ```jade
  12 doctype html
  13 html
  14   head
  15     title Slim Examples
  16     meta[charset='utf-8']
  17     meta(name="keywords" content="template language")
  18     meta name="author" content=author
  19     meta property='og:image' content=asset_url('foo.png')
  20     meta property='og:image' content=(path_to_user user)
  21     meta(
  22       property='description'
  23       content='this is the song that never ends')
  24 ```
  25
  26 ### Attributes
  27
  28 ```jade
  29 meta[charset='utf-8']
  30 meta(name="keywords" content="template language")
  31 meta name="author" content=author
  32 ```
  33
  34 You can use parentheses, brackets, or none at all.
  35
  36 ### Ruby attributes
  37
  38 ```jade
  39 a class=[:menu,:highlight]
  40 ```
  41
  42 You can use Ruby expressions in attributes.
  43
  44 ### Hash attributes
  45
  46 ```jade
  47 .card *{'data-url' => place_path(place)}
  48 ```
  49
  50 You can destructure Ruby hashes as attributes.
  51
  52 ### Inline Ruby
  53
  54 ```jade
  55 ruby:
  56   def foobar
  57     "hello"
  58   end
  59
  60 div= foobar
  61 ```
  62
  63 ### Inline Markdown
  64
  65 ```jade
  66 markdown:
  67   ### On Markdown
  68
  69   I am *Markdown* _text_!
  70   {: .classname}
  71 ```
  72
  73 Slim can handle your [Markdown](https://daringfireball.net/projects/markdown/syntax) content for longer content blocks or `code`.
  74 Depending on your parser, like [Kramdown](https://kramdown.gettalong.org/quickref.html), other features might work, like assigning attributes or classes.
  75
  76 ### Embedded JavaScript
  77
  78 ```jade
  79 javascript:
  80   alert('Slim supports embedded javascript!')
  81 ```
  82
  83
  84 ### Comments
  85
  86 ```jade
  87 / Comment
  88 /! HTML comment
  89 ```
  90
  91 ### Ruby
  92
  93 ```jade
  94 == yield
  95 = t('.hello')
  96 - 3.times do |i|
  97   div
  98 ```
  99
 100 ### Verbatim text
 101
 102 ```jade
 103 div
 104   | This is text
 105     it is nice
 106 ```
 107
 108 ### Advanced whitespaces
 109
 110 ```jade
 111 div
 112   ' This appends a whitespace
 113 div
 114   |  This hackily prepends a whitespace
 115 div
 116   => 'This appends a whitespace'
 117 div
 118   =< 'This prepends a whitespace'
 119 ```
 120
 121 ### Inline HTML
 122
 123 ```jade
 124 <div class='foo'>
 125   - if articles.empty?
 126     | Nothing here
 127 </div>
 128 ```
 129
 130 ### Inline tags
 131
 132 ```jade
 133 ul
 134   li: a(href='/') Home
 135 ```
 136
 137 ### References
 138
 139 - <http://slim-lang.com/>