# Slim test suite
You can run this testsuite with `rake test:literate`.
We use pretty mode in the test suite to make the output more readable. Pretty mode
is enabled by setting the option
~~~ options
:pretty => true
~~~
## Line indicators
In this section we test all line indicators.
### Text `|`
A text blocks starts with the `|` as line indicator.
~~~ slim
| Text block
~~~
renders as
~~~ html
Text block
~~~
Multiple lines can be indented beneath the first text line.
~~~ slim
| Text
block
with
multiple
lines
~~~
renders as
~~~ html
Text
block
with
multiple
lines
~~~
The first line of a text block determines the indentation.
~~~ slim
|
Text
block
with
multiple
lines
~~~
renders as
~~~ html
Text
block
with
multiple
lines
~~~
You can nest text blocks beneath tags.
~~~ slim
body
| Text
~~~
renders as
~~~ html
Text
~~~
You can embed html code in the text which is not escaped.
~~~ slim
| slim-lang.com
~~~
renders as
~~~ html
slim-lang.com
~~~
### Text with trailing white space `'`
A text blocks with trailing white space starts with the `'` as line indicator.
~~~ slim
' Text block
~~~
renders as
~~~ html
Text block
~~~
This is especially useful if you use tags behind a text block.
~~~ slim
' Link to
a href="http://slim-lang.com" slim-lang.com
~~~
renders as
~~~ html
Link to slim-lang.com
~~~
Multiple lines can be indented beneath the first text line.
~~~ slim
' Text
block
with
multiple
lines
~~~
renders as
~~~ html
Text
block
with
multiple
lines
~~~
The first line of a text block determines the indentation.
~~~ slim
'
Text
block
with
multiple
lines
~~~
renders as
~~~ html
Text
block
with
multiple
lines
~~~
### Inline HTML `<`
HTML can be written directly.
~~~ slim
slim-lang.com
~~~
renders as
~~~ html
slim-lang.com
~~~
HTML tags allow nested blocks inside.
~~~ slim
title Example
body
- if true
| yes
- else
| no
~~~
renders as
~~~ html
Example
yes
~~~
### Control code `-`
The dash `-` denotes arbitrary control code.
~~~ slim
- greeting = 'Hello, World!'
- if false
| Not true
- else
= greeting
~~~
renders as
~~~ html
Hello, World!
~~~
Complex code can be broken with backslash `\`.
~~~ slim
- greeting = 'Hello, '+\
\
'World!'
- if false
| Not true
- else
= greeting
~~~
renders as
~~~ html
Hello, World!
~~~
You can also write loops like this
~~~ slim
- items = [{name: 'table', price: 10}, {name: 'chair', price: 5}]
table#items
- for item in items do
tr
td.name = item[:name]
td.price = item[:price]
~~~
which renders as
~~~ html
table
10
chair
5
~~~
The `do` keyword can be omitted.
~~~ slim
- items = [{name: 'table', price: 10}, {name: 'chair', price: 5}]
table#items
- for item in items
tr
td.name = item[:name]
td.price = item[:price]
~~~
which renders as
~~~ html
table
10
chair
5
~~~
### Output `=`
The equal sign `=` produces dynamic output.
~~~ slim
= 7*7
~~~
renders as
~~~ html
49
~~~
Dynamic output is escaped by default.
~~~ slim
= ''
~~~
renders as
~~~ html
<script>evil();</script>
~~~
Long code lines can be broken with `\`.
~~~ slim
= (0..10).map do |i|\
2**i \
end.join(', ')
~~~
renders as
~~~ html
1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024
~~~
You don't need the explicit `\` if the line ends with a comma `,`.
~~~ slim
ruby:
def test(*args)
args.join('-')
end
= test('arg1',
'arg2',
'arg3')
~~~
renders as
~~~ html
arg1-arg2-arg3
~~~
You can also disable HTML escaping globally by setting the option
~~~ options
:disable_escape => true
~~~
~~~ slim
= ''
~~~
renders as
~~~ html
~~~
The equal sign with modifier `=>` produces dynamic output with a trailing white space.
~~~ slim
=> 7*7
~~~
renders as
~~~ html
49
~~~
~~~ slim
=< 7*7
~~~
renders as
~~~ html
49
~~~
The equal sign with modifier `=<` produces dynamic output with a leading white space.
~~~ slim
=< 7*7
~~~
renders as
~~~ html
49
~~~
The equal sign with modifiers `=<>` produces dynamic output with a leading and trailing white space.
~~~ slim
=<> 7*7
~~~
renders as
~~~ html
49
~~~
### Output without HTML escaping `==`
The double equal sign `==` produces dynamic output without HTML escaping.
~~~ slim
== ''
~~~
renders as
~~~ html
~~~
The option option
~~~ options
:disable_escape => true
~~~
doesn't affect the output of `==`.
~~~ slim
== ''
~~~
renders as
~~~ html
~~~
The double equal sign with modifier `==>` produces dynamic output without HTML escaping and trailing white space.
~~~ slim
==> ''
~~~
renders as
~~~ html
~~~
The option option
~~~ options
:disable_escape => true
~~~
doesn't affect the output of `==`.
~~~ slim
==> ''
~~~
renders as
~~~ html
~~~
### Code comment `/`
Code comments begin with `/` and produce no output.
~~~ slim
/ Comment
body
/ Another comment
with
multiple lines
p Hello!
~~~
renders as
~~~ html
Hello!
~~~
### HTML comment `/!`
Code comments begin with `/!`.
~~~ slim
/! Comment
body
/! Another comment
with multiple lines
p Hello!
/!
First line determines indentation
of the comment
~~~
renders as
~~~ html
Hello!
~~~
### IE conditional comment `/[...]`
~~~ slim
/[if IE]
p Get a better browser.
~~~
renders as
~~~ html
~~~
## HTML tags
### Doctype tags
The doctype tag is a special tag which can be used to generate the complex doctypes in a very simple way.
You can output the XML version using the doctype tag.
~~~ slim
doctype xml
doctype xml ISO-8859-1
~~~
renders as
~~~ html
~~~
In XHTML mode the following doctypes are supported:
~~~ slim
doctype html
doctype 5
doctype 1.1
doctype strict
doctype frameset
doctype mobile
doctype basic
doctype transitional
~~~
renders as
~~~ html
~~~
If we activate HTML mode with the option
~~~ options
:format => :html
~~~
the following doctypes are supported:
~~~ slim
doctype html
doctype 5
doctype strict
doctype frameset
doctype transitional
~~~
renders as
~~~ html
~~~
### Closed tags
You can close tags explicitly by appending a trailing `/`.
~~~ slim
div id="not-closed"
.closed/
#closed/
div id="closed"/
~~~
renders as
~~~ html
~~~
Note, that this is usually not necessary since the standard html tags (img, br, ...) are closed automatically.
~~~ slim
img src="image.png"
~~~
renders as
~~~ html
~~~
### Trailing and leading whitespace
You can force a trailing whitespace behind a tag by adding `>`.
~~~ slim
a#closed> class="test" /
a#closed> class="test"/
a> href='url1' Link1
a< href='url1' Link1
~~~
renders as
~~~ html
Link1Link1
~~~
If you combine > and => only one trailing whitespace is added.
~~~ slim
a> => 'Text1'
a => 'Text2'
a> = 'Text3'
a>= 'Text4'
a=> 'Text5'
a<= 'Text6'
a=< 'Text7'
~~~
renders as
~~~ html
Text1Text2Text3Text4Text5Text6Text7
~~~
You can force a leading whitespace before a tag by adding `<`.
~~~ slim
a#closed< class="test" /
a#closed< class="test"/
a< href='url1' Link1
a< href='url2' Link2
~~~
~~~ html
Link1Link2
~~~
You can also combine both.
~~~ slim
a#closed<> class="test" /
a#closed>< class="test"/
a<> href='url1' Link1
a<> href='url2' Link2
~~~
~~~ html
Link1Link2
~~~
### Inline tags
Sometimes you may want to be a little more compact and inline the tags.
~~~ slim
ul
li.first: a href="/first" First
li: a href="/second" Second
~~~
renders as
~~~ html
~~~
For readability, don't forget you can wrap the attributes.
~~~ slim
ul
li.first: a(href="/first") First
li: a(href="/second") Second
~~~
renders as
~~~ html
~~~
### Text content
### Dynamic content `=`
### Attributes
#### Attribute wrapper
If a delimiter makes the syntax more readable for you, you can use the characters `{...}`, `(...)`, `[...]` to wrap the attributes.
~~~ slim
li
a(href="http://slim-lang.com" class="important") Link
li
a[href="http://slim-lang.com" class="important"] Link
li
a{href="http://slim-lang.com" class="important"} Link
~~~
renders as
~~~ html
~~~
If you wrap the attributes, you can spread them across multiple lines:
~~~ slim
a(href="http://slim-lang.com"
class="important") Link
~~~
renders as
~~~ html
Link
~~~
~~~ slim
dl(
itemprop='address'
itemscope
itemtype='http://schema.org/PostalAddress'
)
~~~
renders as
~~~ html
~~~
You may use spaces around the wrappers and assignments:
~~~ slim
h1 id = "logo" Logo
h2 [ id = "tagline" ] Tagline
~~~
renders as
~~~ html
Logo
Tagline
~~~
#### Quoted attributes
You can use single or double quotes for simple text attributes.
~~~ slim
a href="http://slim-lang.com" title='Slim Homepage' Goto the Slim homepage
~~~
renders as
~~~ html
Goto the Slim homepage
~~~
You can use text interpolation in the quoted attributes:
~~~ slim
- url='slim-lang.com'
a href="http://#{url}" Goto the #{url}
a href="{"test"}" Test of quoted text in braces
~~~
renders as
~~~ html
Goto the slim-lang.comTest of quoted text in braces
~~~
The attribute value will be escaped by default. Use == if you want to disable escaping in the attribute.
~~~ slim
li
a href='&' Link
li
a href=="&" Link
~~~
renders as
~~~ html
~~~
You can use newlines in quoted attributes
~~~ slim
a data-title="help" data-content="extremely long help text that goes on
and one and one and then starts over...." Link
~~~
renders as
~~~ html
Link
~~~
You can break quoted attributes with an backslash `\`
~~~ slim
a data-title="help" data-content="extremely long help text that goes on\
and one and one and then starts over...." Link
~~~
renders as
~~~ html
Link
~~~
#### Ruby attributes
Long ruby attributes can be broken with backslash `\`
~~~ slim
a href=1+\
1 Link
~~~
renders as
~~~ html
Link
~~~
You don't need the explicit `\` if the line ends with a comma `,`.
~~~ slim
ruby:
def test(*args)
args.join('-')
end
a href=test('arg1',
'arg2',
'arg3') Link
~~~
renders as
~~~ html
Link
~~~
#### Boolean attributes
The attribute values `true`, `false` and `nil` are interpreted as booleans.
If you use the attribut wrapper you can omit the attribute assigment.
~~~ slim
- true_value1 = ""
- true_value2 = true
input type="text" disabled=true_value1
input type="text" disabled=true_value2
input type="text" disabled="disabled"
input type="text" disabled=true
input(type="text" disabled)
~~~
renders as
~~~ html
~~~
~~~ slim
- false_value1 = false
- false_value2 = nil
input type="text" disabled=false_value1
input type="text" disabled=false_value2
input type="text"
input type="text" disabled=false
input type="text" disabled=nil
~~~
renders as
~~~ html
~~~
If html5 is activated the attributes are written as standalone.
~~~ options
:format => :html
~~~
~~~ slim
- true_value1 = ""
- true_value2 = true
input type="text" disabled=true_value1
input type="text" disabled=true_value2
input type="text" disabled="disabled"
input type="text" disabled=true
input(type="text" disabled)
~~~
renders as
~~~ html
~~~
#### Attribute merging
You can configure attributes to be merged if multiple are given (See option `:merge_attrs`). In the default configuration
this is done for class attributes with the white space as delimiter.
~~~ slim
a.menu class="highlight" href="http://slim-lang.com/" Slim-lang.com
~~~
renders as
~~~ html
Slim-lang.com
~~~
You can also use an `Array` as attribute value and the array elements will be merged using the delimiter.
~~~ slim
- classes = [:alpha, :beta]
span class=["first","highlight"] class=classes First
span class=:second,:highlight class=classes Second
~~~
renders as
~~~ html
FirstSecond
~~~
#### Splat attributes `*`
#### Dynamic tags `*`
You can create completely dynamic tags using the splat attributes. Just create a method which returns a hash
with the :tag key.
~~~ slim
ruby:
def a_unless_current
@page_current ? {tag: 'span'} : {tag: 'a', href: 'http://slim-lang.com/'}
end
- @page_current = true
*a_unless_current Link
- @page_current = false
*a_unless_current Link
~~~
renders as
~~~ html
LinkLink
~~~
### Shortcuts
#### Tag shortcuts
We add tag shortcuts by setting the option `:shortcut`.
~~~ options
:shortcut => {'c' => {tag: 'container'}, 'sec' => {tag:'section'}, '#' => {attr: 'id'}, '.' => {attr: 'class'} }
~~~
~~~ slim
sec: c.content Text
~~~
renders to
~~~ html
Text
~~~
#### Attribute shortcuts
We add `&` to create a shortcut for the input elements with type attribute by setting the option `:shortcut`.
~~~ options
:shortcut => {'&' => {tag: 'input', attr: 'type'}, '#' => {attr: 'id'}, '.' => {attr: 'class'} }
~~~
~~~ slim
&text name="user"
&password name="pw"
&submit.CLASS#ID
~~~
renders to
~~~ html
~~~
This is stupid, but you can also use multiple character shortcuts.
~~~ options
:shortcut => {'&' => {tag: 'input', attr: 'type'}, '#<' => {attr: 'id'}, '#>' => {attr: 'class'} }
~~~
~~~ slim
&text name="user"
&password name="pw"
&submit#>CLASS#
~~~
You can also set multiple attributes per shortcut.
~~~ options
:shortcut => {'.' => {attr: %w(id class)} }
~~~
~~~ slim
.test
~~~
renders to
~~~ html
~~~
Shortcuts can also have multiple characters.
~~~ options
:shortcut => {'.' => {attr: 'class'}, '#' => {attr: 'id'}, '.#' => {attr: %w(class id)} }
~~~
~~~ slim
.#test
.test
#test
~~~
renders to
~~~ html
~~~
#### ID shortcut and class shortcut `.`
ID and class shortcuts can contain dashes.
~~~ slim
.-test text
#test- text
.--a#b- text
.a--test-123#--b text
~~~
renders as
~~~ html
text
text
text
text
~~~
## Text interpolation
Use standard Ruby interpolation. The text will be html escaped by default.
~~~ slim
- user="John Doe "
h1 Welcome #{user}!
~~~
renders as
~~~ html
Welcome John Doe <john@doe.net>!
~~~
## Pretty printing of XML
We can enable XML mode with
~~~ options
:format => :xml
~~~
~~~ slim
doctype xml
document
closed-element/
element(boolean-attribute)
child attribute="value"
| content
~~~
~~~ html
content
~~~
## Embedded engines
## Configuring Slim
## Plugins
~~~
### Trailing and leading whitespace
You can force a trailing whitespace behind a tag by adding `>`.
~~~ slim
a#closed> class="test" /
a#closed> class="test"/
a> href='url1' Link1
a< href='url1' Link1
~~~
renders as
~~~ html
Link1 Link1
~~~
If you combine > and => only one trailing whitespace is added.
~~~ slim
a> => 'Text1'
a => 'Text2'
a> = 'Text3'
a>= 'Text4'
a=> 'Text5'
a<= 'Text6'
a=< 'Text7'
~~~
renders as
~~~ html
Text1 Text2 Text3 Text4 Text5 Text6 Text7
~~~
You can force a leading whitespace before a tag by adding `<`.
~~~ slim
a#closed< class="test" /
a#closed< class="test"/
a< href='url1' Link1
a< href='url2' Link2
~~~
~~~ html
Link1 Link2
~~~
You can also combine both.
~~~ slim
a#closed<> class="test" /
a#closed>< class="test"/
a<> href='url1' Link1
a<> href='url2' Link2
~~~
~~~ html
Link1 Link2
~~~
### Inline tags
Sometimes you may want to be a little more compact and inline the tags.
~~~ slim
ul
li.first: a href="/first" First
li: a href="/second" Second
~~~
renders as
~~~ html
~~~
For readability, don't forget you can wrap the attributes.
~~~ slim
ul
li.first: a(href="/first") First
li: a(href="/second") Second
~~~
renders as
~~~ html
~~~
### Text content
### Dynamic content `=`
### Attributes
#### Attribute wrapper
If a delimiter makes the syntax more readable for you, you can use the characters `{...}`, `(...)`, `[...]` to wrap the attributes.
~~~ slim
li
a(href="http://slim-lang.com" class="important") Link
li
a[href="http://slim-lang.com" class="important"] Link
li
a{href="http://slim-lang.com" class="important"} Link
~~~
renders as
~~~ html