super-pro-kit 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/slim-5.2.1/CHANGES +496 -0
- data/slim-5.2.1/Gemfile +43 -0
- data/slim-5.2.1/LICENSE +21 -0
- data/slim-5.2.1/README.jp.md +1276 -0
- data/slim-5.2.1/README.md +1313 -0
- data/slim-5.2.1/Rakefile +80 -0
- data/slim-5.2.1/bin/slimrb +6 -0
- data/slim-5.2.1/doc/include.md +20 -0
- data/slim-5.2.1/doc/jp/include.md +20 -0
- data/slim-5.2.1/doc/jp/logic_less.md +137 -0
- data/slim-5.2.1/doc/jp/smart.md +102 -0
- data/slim-5.2.1/doc/jp/translator.md +28 -0
- data/slim-5.2.1/doc/logic_less.md +137 -0
- data/slim-5.2.1/doc/smart.md +120 -0
- data/slim-5.2.1/doc/translator.md +28 -0
- data/slim-5.2.1/lib/slim/code_attributes.rb +68 -0
- data/slim-5.2.1/lib/slim/command.rb +122 -0
- data/slim-5.2.1/lib/slim/controls.rb +61 -0
- data/slim-5.2.1/lib/slim/do_inserter.rb +34 -0
- data/slim-5.2.1/lib/slim/embedded.rb +248 -0
- data/slim-5.2.1/lib/slim/end_inserter.rb +63 -0
- data/slim-5.2.1/lib/slim/engine.rb +42 -0
- data/slim-5.2.1/lib/slim/erb_converter.rb +15 -0
- data/slim-5.2.1/lib/slim/filter.rb +31 -0
- data/slim-5.2.1/lib/slim/grammar.rb +24 -0
- data/slim-5.2.1/lib/slim/include.rb +58 -0
- data/slim-5.2.1/lib/slim/interpolation.rb +36 -0
- data/slim-5.2.1/lib/slim/logic_less/context.rb +126 -0
- data/slim-5.2.1/lib/slim/logic_less/filter.rb +81 -0
- data/slim-5.2.1/lib/slim/logic_less.rb +6 -0
- data/slim-5.2.1/lib/slim/parser.rb +535 -0
- data/slim-5.2.1/lib/slim/railtie.rb +19 -0
- data/slim-5.2.1/lib/slim/smart/escaper.rb +42 -0
- data/slim-5.2.1/lib/slim/smart/filter.rb +97 -0
- data/slim-5.2.1/lib/slim/smart/parser.rb +35 -0
- data/slim-5.2.1/lib/slim/smart.rb +9 -0
- data/slim-5.2.1/lib/slim/splat/builder.rb +115 -0
- data/slim-5.2.1/lib/slim/splat/filter.rb +93 -0
- data/slim-5.2.1/lib/slim/template.rb +6 -0
- data/slim-5.2.1/lib/slim/translator.rb +119 -0
- data/slim-5.2.1/lib/slim/version.rb +6 -0
- data/slim-5.2.1/lib/slim.rb +16 -0
- data/slim-5.2.1/slim.gemspec +33 -0
- data/slim-5.2.1/test/core/helper.rb +201 -0
- data/slim-5.2.1/test/core/test_code_blocks.rb +194 -0
- data/slim-5.2.1/test/core/test_code_escaping.rb +162 -0
- data/slim-5.2.1/test/core/test_code_evaluation.rb +181 -0
- data/slim-5.2.1/test/core/test_code_output.rb +168 -0
- data/slim-5.2.1/test/core/test_code_structure.rb +203 -0
- data/slim-5.2.1/test/core/test_commands.rb +219 -0
- data/slim-5.2.1/test/core/test_embedded_engines.rb +247 -0
- data/slim-5.2.1/test/core/test_encoding.rb +28 -0
- data/slim-5.2.1/test/core/test_erb_converter.rb +65 -0
- data/slim-5.2.1/test/core/test_html_attributes.rb +276 -0
- data/slim-5.2.1/test/core/test_html_escaping.rb +65 -0
- data/slim-5.2.1/test/core/test_html_structure.rb +599 -0
- data/slim-5.2.1/test/core/test_parser_errors.rb +148 -0
- data/slim-5.2.1/test/core/test_pretty.rb +163 -0
- data/slim-5.2.1/test/core/test_ruby_errors.rb +200 -0
- data/slim-5.2.1/test/core/test_slim_template.rb +78 -0
- data/slim-5.2.1/test/core/test_splat_prefix_option.rb +155 -0
- data/slim-5.2.1/test/core/test_tabs.rb +169 -0
- data/slim-5.2.1/test/core/test_text_interpolation.rb +79 -0
- data/slim-5.2.1/test/core/test_thread_options.rb +18 -0
- data/slim-5.2.1/test/core/test_unicode.rb +15 -0
- data/slim-5.2.1/test/include/files/recursive.slim +1 -0
- data/slim-5.2.1/test/include/files/slimfile.slim +3 -0
- data/slim-5.2.1/test/include/files/subdir/test.slim +1 -0
- data/slim-5.2.1/test/include/files/textfile +1 -0
- data/slim-5.2.1/test/include/test_include.rb +24 -0
- data/slim-5.2.1/test/literate/TESTS.md +1323 -0
- data/slim-5.2.1/test/literate/helper.rb +15 -0
- data/slim-5.2.1/test/literate/run.rb +92 -0
- data/slim-5.2.1/test/logic_less/test_logic_less.rb +330 -0
- data/slim-5.2.1/test/rails/Rakefile +7 -0
- data/slim-5.2.1/test/rails/app/assets/config/manifest.js +1 -0
- data/slim-5.2.1/test/rails/app/controllers/application_controller.rb +2 -0
- data/slim-5.2.1/test/rails/app/controllers/entries_controller.rb +5 -0
- data/slim-5.2.1/test/rails/app/controllers/slim_controller.rb +46 -0
- data/slim-5.2.1/test/rails/app/helpers/application_helper.rb +5 -0
- data/slim-5.2.1/test/rails/app/models/entry.rb +16 -0
- data/slim-5.2.1/test/rails/app/views/entries/edit.html.slim +3 -0
- data/slim-5.2.1/test/rails/app/views/layouts/application.html+testvariant.slim +10 -0
- data/slim-5.2.1/test/rails/app/views/layouts/application.html.slim +10 -0
- data/slim-5.2.1/test/rails/app/views/slim/_partial.html.slim +1 -0
- data/slim-5.2.1/test/rails/app/views/slim/attributes.html.slim +3 -0
- data/slim-5.2.1/test/rails/app/views/slim/content_for.html.slim +7 -0
- data/slim-5.2.1/test/rails/app/views/slim/erb.html.erb +1 -0
- data/slim-5.2.1/test/rails/app/views/slim/form_for.html.slim +2 -0
- data/slim-5.2.1/test/rails/app/views/slim/helper.html.slim +4 -0
- data/slim-5.2.1/test/rails/app/views/slim/integers.html.slim +1 -0
- data/slim-5.2.1/test/rails/app/views/slim/no_layout.html.slim +1 -0
- data/slim-5.2.1/test/rails/app/views/slim/normal.html.slim +1 -0
- data/slim-5.2.1/test/rails/app/views/slim/partial.html.slim +2 -0
- data/slim-5.2.1/test/rails/app/views/slim/splat.html.slim +2 -0
- data/slim-5.2.1/test/rails/app/views/slim/splat_with_delimiter.slim +1 -0
- data/slim-5.2.1/test/rails/app/views/slim/thread_options.html.slim +1 -0
- data/slim-5.2.1/test/rails/app/views/slim/variables.html.slim +1 -0
- data/slim-5.2.1/test/rails/app/views/slim/xml.slim +1 -0
- data/slim-5.2.1/test/rails/config/application.rb +44 -0
- data/slim-5.2.1/test/rails/config/boot.rb +10 -0
- data/slim-5.2.1/test/rails/config/environment.rb +5 -0
- data/slim-5.2.1/test/rails/config/environments/test.rb +34 -0
- data/slim-5.2.1/test/rails/config/initializers/backtrace_silencers.rb +7 -0
- data/slim-5.2.1/test/rails/config/initializers/inflections.rb +10 -0
- data/slim-5.2.1/test/rails/config/initializers/mime_types.rb +5 -0
- data/slim-5.2.1/test/rails/config/initializers/session_store.rb +8 -0
- data/slim-5.2.1/test/rails/config/locales/en.yml +5 -0
- data/slim-5.2.1/test/rails/config/routes.rb +60 -0
- data/slim-5.2.1/test/rails/config.ru +4 -0
- data/slim-5.2.1/test/rails/script/rails +6 -0
- data/slim-5.2.1/test/rails/test/helper.rb +34 -0
- data/slim-5.2.1/test/rails/test/test_slim.rb +102 -0
- data/slim-5.2.1/test/sinatra/contest.rb +91 -0
- data/slim-5.2.1/test/sinatra/helper.rb +143 -0
- data/slim-5.2.1/test/sinatra/test_core.rb +91 -0
- data/slim-5.2.1/test/sinatra/test_include.rb +16 -0
- data/slim-5.2.1/test/sinatra/views/embed_include_js.slim +8 -0
- data/slim-5.2.1/test/sinatra/views/embed_js.slim +11 -0
- data/slim-5.2.1/test/sinatra/views/footer.slim +1 -0
- data/slim-5.2.1/test/sinatra/views/hello.slim +1 -0
- data/slim-5.2.1/test/sinatra/views/layout2.slim +3 -0
- data/slim-5.2.1/test/smart/test_smart_text.rb +294 -0
- data/slim-5.2.1/test/translator/test_translator.rb +76 -0
- data/super-pro-kit.gemspec +11 -0
- metadata +165 -0
|
@@ -0,0 +1,1323 @@
|
|
|
1
|
+
# Slim test suite
|
|
2
|
+
|
|
3
|
+
You can run this testsuite with `rake test:literate`.
|
|
4
|
+
|
|
5
|
+
We use pretty mode in the test suite to make the output more readable. Pretty mode
|
|
6
|
+
is enabled by setting the option
|
|
7
|
+
|
|
8
|
+
~~~ options
|
|
9
|
+
:pretty => true
|
|
10
|
+
~~~
|
|
11
|
+
|
|
12
|
+
## Line indicators
|
|
13
|
+
|
|
14
|
+
In this section we test all line indicators.
|
|
15
|
+
|
|
16
|
+
### Text `|`
|
|
17
|
+
|
|
18
|
+
A text blocks starts with the `|` as line indicator.
|
|
19
|
+
|
|
20
|
+
~~~ slim
|
|
21
|
+
| Text block
|
|
22
|
+
~~~
|
|
23
|
+
|
|
24
|
+
renders as
|
|
25
|
+
|
|
26
|
+
~~~ html
|
|
27
|
+
Text block
|
|
28
|
+
~~~
|
|
29
|
+
|
|
30
|
+
You can add leading or trailing white space with the `<` and `>` markers:
|
|
31
|
+
|
|
32
|
+
~~~ slim
|
|
33
|
+
|< Text with leading whitespace.
|
|
34
|
+
| Text with leading whitespace.
|
|
35
|
+
|> Text with trailing whitespace.
|
|
36
|
+
|<> Text with both leading and trailing whitespace.
|
|
37
|
+
~~~
|
|
38
|
+
|
|
39
|
+
renders as
|
|
40
|
+
|
|
41
|
+
~~~ html
|
|
42
|
+
Text with leading whitespace. Text with leading whitespace.Text with trailing whitespace. Text with both leading and trailing whitespace.
|
|
43
|
+
~~~
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
Multiple lines can be indented beneath the first text line.
|
|
47
|
+
|
|
48
|
+
~~~ slim
|
|
49
|
+
| Text
|
|
50
|
+
block
|
|
51
|
+
|
|
52
|
+
with
|
|
53
|
+
|
|
54
|
+
multiple
|
|
55
|
+
lines
|
|
56
|
+
~~~
|
|
57
|
+
|
|
58
|
+
renders as
|
|
59
|
+
|
|
60
|
+
~~~ html
|
|
61
|
+
Text
|
|
62
|
+
block
|
|
63
|
+
|
|
64
|
+
with
|
|
65
|
+
|
|
66
|
+
multiple
|
|
67
|
+
lines
|
|
68
|
+
~~~
|
|
69
|
+
|
|
70
|
+
The first line of a text block determines the indentation.
|
|
71
|
+
|
|
72
|
+
~~~ slim
|
|
73
|
+
|
|
|
74
|
+
|
|
75
|
+
Text
|
|
76
|
+
block
|
|
77
|
+
|
|
78
|
+
with
|
|
79
|
+
|
|
80
|
+
multiple
|
|
81
|
+
lines
|
|
82
|
+
~~~
|
|
83
|
+
|
|
84
|
+
renders as
|
|
85
|
+
|
|
86
|
+
~~~ html
|
|
87
|
+
Text
|
|
88
|
+
block
|
|
89
|
+
|
|
90
|
+
with
|
|
91
|
+
|
|
92
|
+
multiple
|
|
93
|
+
lines
|
|
94
|
+
~~~
|
|
95
|
+
|
|
96
|
+
~~~ slim
|
|
97
|
+
|><
|
|
98
|
+
|
|
99
|
+
Text
|
|
100
|
+
block
|
|
101
|
+
|
|
102
|
+
with
|
|
103
|
+
|
|
104
|
+
multiple
|
|
105
|
+
lines
|
|
106
|
+
~~~
|
|
107
|
+
|
|
108
|
+
renders as
|
|
109
|
+
|
|
110
|
+
~~~ html
|
|
111
|
+
Text
|
|
112
|
+
block
|
|
113
|
+
|
|
114
|
+
with
|
|
115
|
+
|
|
116
|
+
multiple
|
|
117
|
+
lines
|
|
118
|
+
~~~
|
|
119
|
+
|
|
120
|
+
You can nest text blocks beneath tags.
|
|
121
|
+
|
|
122
|
+
~~~ slim
|
|
123
|
+
body
|
|
124
|
+
| Text
|
|
125
|
+
~~~
|
|
126
|
+
|
|
127
|
+
renders as
|
|
128
|
+
|
|
129
|
+
~~~ html
|
|
130
|
+
<body>
|
|
131
|
+
Text
|
|
132
|
+
</body>
|
|
133
|
+
~~~
|
|
134
|
+
|
|
135
|
+
You can embed html code in the text which is not escaped.
|
|
136
|
+
|
|
137
|
+
~~~ slim
|
|
138
|
+
| <a href="http://github.com/slim-template/slim">github.com/slim-template/slim</a>
|
|
139
|
+
~~~
|
|
140
|
+
|
|
141
|
+
renders as
|
|
142
|
+
|
|
143
|
+
~~~ html
|
|
144
|
+
<a href="http://github.com/slim-template/slim">github.com/slim-template/slim</a>
|
|
145
|
+
~~~
|
|
146
|
+
|
|
147
|
+
~~~ slim
|
|
148
|
+
|<a href="http://github.com/slim-template/slim">github.com/slim-template/slim</a>
|
|
149
|
+
~~~
|
|
150
|
+
|
|
151
|
+
renders as
|
|
152
|
+
|
|
153
|
+
~~~ html
|
|
154
|
+
<a href="http://github.com/slim-template/slim">github.com/slim-template/slim</a>
|
|
155
|
+
~~~
|
|
156
|
+
|
|
157
|
+
### Text with trailing white space `'`
|
|
158
|
+
|
|
159
|
+
A text blocks with trailing white space starts with the `'` as line indicator.
|
|
160
|
+
|
|
161
|
+
~~~ slim
|
|
162
|
+
' Text block
|
|
163
|
+
~~~
|
|
164
|
+
|
|
165
|
+
renders as
|
|
166
|
+
|
|
167
|
+
~~~ html
|
|
168
|
+
Text block
|
|
169
|
+
~~~
|
|
170
|
+
|
|
171
|
+
This is especially useful if you use tags behind a text block.
|
|
172
|
+
|
|
173
|
+
~~~ slim
|
|
174
|
+
' Link to
|
|
175
|
+
a href="http://github.com/slim-template/slim" github.com/slim-template/slim
|
|
176
|
+
~~~
|
|
177
|
+
|
|
178
|
+
renders as
|
|
179
|
+
|
|
180
|
+
~~~ html
|
|
181
|
+
Link to <a href="http://github.com/slim-template/slim">github.com/slim-template/slim</a>
|
|
182
|
+
~~~
|
|
183
|
+
|
|
184
|
+
Multiple lines can be indented beneath the first text line.
|
|
185
|
+
|
|
186
|
+
~~~ slim
|
|
187
|
+
' Text
|
|
188
|
+
block
|
|
189
|
+
|
|
190
|
+
with
|
|
191
|
+
|
|
192
|
+
multiple
|
|
193
|
+
lines
|
|
194
|
+
~~~
|
|
195
|
+
|
|
196
|
+
renders as
|
|
197
|
+
|
|
198
|
+
~~~ html
|
|
199
|
+
Text
|
|
200
|
+
block
|
|
201
|
+
|
|
202
|
+
with
|
|
203
|
+
|
|
204
|
+
multiple
|
|
205
|
+
lines
|
|
206
|
+
~~~
|
|
207
|
+
|
|
208
|
+
The first line of a text block determines the indentation.
|
|
209
|
+
|
|
210
|
+
~~~ slim
|
|
211
|
+
'
|
|
212
|
+
|
|
213
|
+
Text
|
|
214
|
+
block
|
|
215
|
+
|
|
216
|
+
with
|
|
217
|
+
|
|
218
|
+
multiple
|
|
219
|
+
lines
|
|
220
|
+
~~~
|
|
221
|
+
|
|
222
|
+
renders as
|
|
223
|
+
|
|
224
|
+
~~~ html
|
|
225
|
+
Text
|
|
226
|
+
block
|
|
227
|
+
|
|
228
|
+
with
|
|
229
|
+
|
|
230
|
+
multiple
|
|
231
|
+
lines
|
|
232
|
+
~~~
|
|
233
|
+
|
|
234
|
+
### Inline HTML `<`
|
|
235
|
+
|
|
236
|
+
HTML can be written directly.
|
|
237
|
+
|
|
238
|
+
~~~ slim
|
|
239
|
+
<a href="http://github.com/slim-template/slim">github.com/slim-template/slim</a>
|
|
240
|
+
~~~
|
|
241
|
+
|
|
242
|
+
renders as
|
|
243
|
+
|
|
244
|
+
~~~ html
|
|
245
|
+
<a href="http://github.com/slim-template/slim">github.com/slim-template/slim</a>
|
|
246
|
+
~~~
|
|
247
|
+
|
|
248
|
+
HTML tags allow nested blocks inside.
|
|
249
|
+
|
|
250
|
+
~~~ slim
|
|
251
|
+
<html>
|
|
252
|
+
<head>
|
|
253
|
+
title Example
|
|
254
|
+
</head>
|
|
255
|
+
body
|
|
256
|
+
- if true
|
|
257
|
+
| yes
|
|
258
|
+
- else
|
|
259
|
+
| no
|
|
260
|
+
</html>
|
|
261
|
+
~~~
|
|
262
|
+
|
|
263
|
+
renders as
|
|
264
|
+
|
|
265
|
+
~~~ html
|
|
266
|
+
<html><head><title>Example</title></head>
|
|
267
|
+
<body>
|
|
268
|
+
yes
|
|
269
|
+
</body>
|
|
270
|
+
</html>
|
|
271
|
+
~~~
|
|
272
|
+
|
|
273
|
+
### Control code `-`
|
|
274
|
+
|
|
275
|
+
The dash `-` denotes arbitrary control code.
|
|
276
|
+
|
|
277
|
+
~~~ slim
|
|
278
|
+
- greeting = 'Hello, World!'
|
|
279
|
+
- if false
|
|
280
|
+
| Not true
|
|
281
|
+
- else
|
|
282
|
+
= greeting
|
|
283
|
+
~~~
|
|
284
|
+
|
|
285
|
+
renders as
|
|
286
|
+
|
|
287
|
+
~~~ html
|
|
288
|
+
Hello, World!
|
|
289
|
+
~~~
|
|
290
|
+
|
|
291
|
+
Complex code can be broken with backslash `\`.
|
|
292
|
+
|
|
293
|
+
~~~ slim
|
|
294
|
+
- greeting = 'Hello, '+\
|
|
295
|
+
\
|
|
296
|
+
'World!'
|
|
297
|
+
- if false
|
|
298
|
+
| Not true
|
|
299
|
+
- else
|
|
300
|
+
= greeting
|
|
301
|
+
~~~
|
|
302
|
+
|
|
303
|
+
renders as
|
|
304
|
+
|
|
305
|
+
~~~ html
|
|
306
|
+
Hello, World!
|
|
307
|
+
~~~
|
|
308
|
+
|
|
309
|
+
You can also write loops like this
|
|
310
|
+
|
|
311
|
+
~~~ slim
|
|
312
|
+
- items = [{name: 'table', price: 10}, {name: 'chair', price: 5}]
|
|
313
|
+
table#items
|
|
314
|
+
- for item in items do
|
|
315
|
+
tr
|
|
316
|
+
td.name = item[:name]
|
|
317
|
+
td.price = item[:price]
|
|
318
|
+
~~~
|
|
319
|
+
|
|
320
|
+
which renders as
|
|
321
|
+
|
|
322
|
+
~~~ html
|
|
323
|
+
<table id="items">
|
|
324
|
+
<tr>
|
|
325
|
+
<td class="name">
|
|
326
|
+
table
|
|
327
|
+
</td>
|
|
328
|
+
<td class="price">
|
|
329
|
+
10
|
|
330
|
+
</td>
|
|
331
|
+
</tr>
|
|
332
|
+
<tr>
|
|
333
|
+
<td class="name">
|
|
334
|
+
chair
|
|
335
|
+
</td>
|
|
336
|
+
<td class="price">
|
|
337
|
+
5
|
|
338
|
+
</td>
|
|
339
|
+
</tr>
|
|
340
|
+
</table>
|
|
341
|
+
~~~
|
|
342
|
+
|
|
343
|
+
The `do` keyword can be omitted.
|
|
344
|
+
|
|
345
|
+
~~~ slim
|
|
346
|
+
- items = [{name: 'table', price: 10}, {name: 'chair', price: 5}]
|
|
347
|
+
table#items
|
|
348
|
+
- for item in items
|
|
349
|
+
tr
|
|
350
|
+
td.name = item[:name]
|
|
351
|
+
td.price = item[:price]
|
|
352
|
+
~~~
|
|
353
|
+
|
|
354
|
+
which renders as
|
|
355
|
+
|
|
356
|
+
~~~ html
|
|
357
|
+
<table id="items">
|
|
358
|
+
<tr>
|
|
359
|
+
<td class="name">
|
|
360
|
+
table
|
|
361
|
+
</td>
|
|
362
|
+
<td class="price">
|
|
363
|
+
10
|
|
364
|
+
</td>
|
|
365
|
+
</tr>
|
|
366
|
+
<tr>
|
|
367
|
+
<td class="name">
|
|
368
|
+
chair
|
|
369
|
+
</td>
|
|
370
|
+
<td class="price">
|
|
371
|
+
5
|
|
372
|
+
</td>
|
|
373
|
+
</tr>
|
|
374
|
+
</table>
|
|
375
|
+
~~~
|
|
376
|
+
|
|
377
|
+
### Output `=`
|
|
378
|
+
|
|
379
|
+
The equal sign `=` produces dynamic output.
|
|
380
|
+
|
|
381
|
+
~~~ slim
|
|
382
|
+
= 7*7
|
|
383
|
+
~~~
|
|
384
|
+
|
|
385
|
+
renders as
|
|
386
|
+
|
|
387
|
+
~~~ html
|
|
388
|
+
49
|
|
389
|
+
~~~
|
|
390
|
+
|
|
391
|
+
Dynamic output is escaped by default.
|
|
392
|
+
|
|
393
|
+
~~~ slim
|
|
394
|
+
= '<script>evil();</script>'
|
|
395
|
+
~~~
|
|
396
|
+
|
|
397
|
+
renders as
|
|
398
|
+
|
|
399
|
+
~~~ html
|
|
400
|
+
<script>evil();</script>
|
|
401
|
+
~~~
|
|
402
|
+
|
|
403
|
+
Long code lines can be broken with `\`.
|
|
404
|
+
|
|
405
|
+
~~~ slim
|
|
406
|
+
= (0..10).map do |i|\
|
|
407
|
+
2**i \
|
|
408
|
+
end.join(', ')
|
|
409
|
+
~~~
|
|
410
|
+
|
|
411
|
+
renders as
|
|
412
|
+
|
|
413
|
+
~~~ html
|
|
414
|
+
1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024
|
|
415
|
+
~~~
|
|
416
|
+
|
|
417
|
+
You don't need the explicit `\` if the line ends with a comma `,`.
|
|
418
|
+
|
|
419
|
+
~~~ slim
|
|
420
|
+
ruby:
|
|
421
|
+
def self.test(*args)
|
|
422
|
+
args.join('-')
|
|
423
|
+
end
|
|
424
|
+
= test('arg1',
|
|
425
|
+
'arg2',
|
|
426
|
+
'arg3')
|
|
427
|
+
~~~
|
|
428
|
+
|
|
429
|
+
renders as
|
|
430
|
+
|
|
431
|
+
~~~ html
|
|
432
|
+
arg1-arg2-arg3
|
|
433
|
+
~~~
|
|
434
|
+
|
|
435
|
+
You can also disable HTML escaping globally by setting the option
|
|
436
|
+
|
|
437
|
+
~~~ options
|
|
438
|
+
:disable_escape => true
|
|
439
|
+
~~~
|
|
440
|
+
|
|
441
|
+
~~~ slim
|
|
442
|
+
= '<script>evil();</script>'
|
|
443
|
+
~~~
|
|
444
|
+
|
|
445
|
+
renders as
|
|
446
|
+
|
|
447
|
+
~~~ html
|
|
448
|
+
<script>evil();</script>
|
|
449
|
+
~~~
|
|
450
|
+
|
|
451
|
+
The equal sign with modifier `=>` produces dynamic output with a trailing white space.
|
|
452
|
+
|
|
453
|
+
~~~ slim
|
|
454
|
+
=> 7*7
|
|
455
|
+
~~~
|
|
456
|
+
|
|
457
|
+
renders as
|
|
458
|
+
|
|
459
|
+
~~~ html
|
|
460
|
+
49
|
|
461
|
+
~~~
|
|
462
|
+
|
|
463
|
+
~~~ slim
|
|
464
|
+
=< 7*7
|
|
465
|
+
~~~
|
|
466
|
+
|
|
467
|
+
renders as
|
|
468
|
+
|
|
469
|
+
~~~ html
|
|
470
|
+
49
|
|
471
|
+
~~~
|
|
472
|
+
|
|
473
|
+
The equal sign with modifier `=<` produces dynamic output with a leading white space.
|
|
474
|
+
|
|
475
|
+
~~~ slim
|
|
476
|
+
=< 7*7
|
|
477
|
+
~~~
|
|
478
|
+
|
|
479
|
+
renders as
|
|
480
|
+
|
|
481
|
+
~~~ html
|
|
482
|
+
49
|
|
483
|
+
~~~
|
|
484
|
+
|
|
485
|
+
The equal sign with modifiers `=<>` produces dynamic output with a leading and trailing white space.
|
|
486
|
+
|
|
487
|
+
~~~ slim
|
|
488
|
+
=<> 7*7
|
|
489
|
+
~~~
|
|
490
|
+
|
|
491
|
+
renders as
|
|
492
|
+
|
|
493
|
+
~~~ html
|
|
494
|
+
49
|
|
495
|
+
~~~
|
|
496
|
+
|
|
497
|
+
### Output without HTML escaping `==`
|
|
498
|
+
|
|
499
|
+
The double equal sign `==` produces dynamic output without HTML escaping.
|
|
500
|
+
|
|
501
|
+
~~~ slim
|
|
502
|
+
== '<script>evil();</script>'
|
|
503
|
+
~~~
|
|
504
|
+
|
|
505
|
+
renders as
|
|
506
|
+
|
|
507
|
+
~~~ html
|
|
508
|
+
<script>evil();</script>
|
|
509
|
+
~~~
|
|
510
|
+
|
|
511
|
+
The option option
|
|
512
|
+
|
|
513
|
+
~~~ options
|
|
514
|
+
:disable_escape => true
|
|
515
|
+
~~~
|
|
516
|
+
|
|
517
|
+
doesn't affect the output of `==`.
|
|
518
|
+
|
|
519
|
+
~~~ slim
|
|
520
|
+
== '<script>evil();</script>'
|
|
521
|
+
~~~
|
|
522
|
+
|
|
523
|
+
renders as
|
|
524
|
+
|
|
525
|
+
~~~ html
|
|
526
|
+
<script>evil();</script>
|
|
527
|
+
~~~
|
|
528
|
+
|
|
529
|
+
The double equal sign with modifier `==>` produces dynamic output without HTML escaping and trailing white space.
|
|
530
|
+
|
|
531
|
+
~~~ slim
|
|
532
|
+
==> '<script>evil();</script>'
|
|
533
|
+
~~~
|
|
534
|
+
|
|
535
|
+
renders as
|
|
536
|
+
|
|
537
|
+
~~~ html
|
|
538
|
+
<script>evil();</script>
|
|
539
|
+
~~~
|
|
540
|
+
|
|
541
|
+
The option option
|
|
542
|
+
|
|
543
|
+
~~~ options
|
|
544
|
+
:disable_escape => true
|
|
545
|
+
~~~
|
|
546
|
+
|
|
547
|
+
doesn't affect the output of `==`.
|
|
548
|
+
|
|
549
|
+
~~~ slim
|
|
550
|
+
==> '<script>evil();</script>'
|
|
551
|
+
~~~
|
|
552
|
+
|
|
553
|
+
renders as
|
|
554
|
+
|
|
555
|
+
~~~ html
|
|
556
|
+
<script>evil();</script>
|
|
557
|
+
~~~
|
|
558
|
+
|
|
559
|
+
### Code comment `/`
|
|
560
|
+
|
|
561
|
+
Code comments begin with `/` and produce no output.
|
|
562
|
+
|
|
563
|
+
~~~ slim
|
|
564
|
+
/ Comment
|
|
565
|
+
body
|
|
566
|
+
/ Another comment
|
|
567
|
+
with
|
|
568
|
+
|
|
569
|
+
multiple lines
|
|
570
|
+
p Hello!
|
|
571
|
+
~~~
|
|
572
|
+
|
|
573
|
+
renders as
|
|
574
|
+
|
|
575
|
+
~~~ html
|
|
576
|
+
<body>
|
|
577
|
+
<p>
|
|
578
|
+
Hello!
|
|
579
|
+
</p>
|
|
580
|
+
</body>
|
|
581
|
+
~~~
|
|
582
|
+
|
|
583
|
+
### HTML comment `/!`
|
|
584
|
+
|
|
585
|
+
Code comments begin with `/!`.
|
|
586
|
+
|
|
587
|
+
~~~ slim
|
|
588
|
+
/! Comment
|
|
589
|
+
body
|
|
590
|
+
/! Another comment
|
|
591
|
+
with multiple lines
|
|
592
|
+
p Hello!
|
|
593
|
+
/!
|
|
594
|
+
First line determines indentation
|
|
595
|
+
|
|
596
|
+
of the comment
|
|
597
|
+
~~~
|
|
598
|
+
|
|
599
|
+
renders as
|
|
600
|
+
|
|
601
|
+
~~~ html
|
|
602
|
+
<!--Comment-->
|
|
603
|
+
<body>
|
|
604
|
+
<!--Another comment
|
|
605
|
+
with multiple lines-->
|
|
606
|
+
<p>
|
|
607
|
+
Hello!
|
|
608
|
+
</p>
|
|
609
|
+
<!--First line determines indentation
|
|
610
|
+
|
|
611
|
+
of the comment-->
|
|
612
|
+
</body>
|
|
613
|
+
~~~
|
|
614
|
+
|
|
615
|
+
### IE conditional comment `/[...]`
|
|
616
|
+
|
|
617
|
+
~~~ slim
|
|
618
|
+
/[if IE]
|
|
619
|
+
p Get a better browser.
|
|
620
|
+
~~~
|
|
621
|
+
|
|
622
|
+
renders as
|
|
623
|
+
|
|
624
|
+
~~~ html
|
|
625
|
+
<!--[if IE]>
|
|
626
|
+
<p>
|
|
627
|
+
Get a better browser.
|
|
628
|
+
</p>
|
|
629
|
+
<![endif]-->
|
|
630
|
+
~~~
|
|
631
|
+
|
|
632
|
+
## HTML tags
|
|
633
|
+
|
|
634
|
+
### Doctype tags
|
|
635
|
+
|
|
636
|
+
The doctype tag is a special tag which can be used to generate the complex doctypes in a very simple way.
|
|
637
|
+
|
|
638
|
+
You can output the XML version using the doctype tag.
|
|
639
|
+
|
|
640
|
+
~~~ slim
|
|
641
|
+
doctype xml
|
|
642
|
+
doctype xml ISO-8859-1
|
|
643
|
+
~~~
|
|
644
|
+
|
|
645
|
+
renders as
|
|
646
|
+
|
|
647
|
+
~~~ html
|
|
648
|
+
<?xml version="1.0" encoding="utf-8" ?>
|
|
649
|
+
<?xml version="1.0" encoding="iso-8859-1" ?>
|
|
650
|
+
~~~
|
|
651
|
+
|
|
652
|
+
In XHTML mode the following doctypes are supported:
|
|
653
|
+
|
|
654
|
+
~~~ slim
|
|
655
|
+
doctype html
|
|
656
|
+
doctype 5
|
|
657
|
+
doctype 1.1
|
|
658
|
+
doctype strict
|
|
659
|
+
doctype frameset
|
|
660
|
+
doctype mobile
|
|
661
|
+
doctype basic
|
|
662
|
+
doctype transitional
|
|
663
|
+
~~~
|
|
664
|
+
|
|
665
|
+
renders as
|
|
666
|
+
|
|
667
|
+
~~~ html
|
|
668
|
+
<!DOCTYPE html>
|
|
669
|
+
<!DOCTYPE html>
|
|
670
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
|
671
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
672
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
|
|
673
|
+
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
|
|
674
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
|
|
675
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
676
|
+
~~~
|
|
677
|
+
|
|
678
|
+
If we activate HTML mode with the option
|
|
679
|
+
|
|
680
|
+
~~~ options
|
|
681
|
+
:format => :html
|
|
682
|
+
~~~
|
|
683
|
+
|
|
684
|
+
the following doctypes are supported:
|
|
685
|
+
|
|
686
|
+
~~~ slim
|
|
687
|
+
doctype html
|
|
688
|
+
doctype 5
|
|
689
|
+
doctype strict
|
|
690
|
+
doctype frameset
|
|
691
|
+
doctype transitional
|
|
692
|
+
~~~
|
|
693
|
+
|
|
694
|
+
renders as
|
|
695
|
+
|
|
696
|
+
~~~ html
|
|
697
|
+
<!DOCTYPE html>
|
|
698
|
+
<!DOCTYPE html>
|
|
699
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
700
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
|
|
701
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|
702
|
+
~~~
|
|
703
|
+
|
|
704
|
+
### Closed tags
|
|
705
|
+
|
|
706
|
+
You can close tags explicitly by appending a trailing `/`.
|
|
707
|
+
|
|
708
|
+
~~~ slim
|
|
709
|
+
div id="not-closed"
|
|
710
|
+
.closed/
|
|
711
|
+
#closed/
|
|
712
|
+
div id="closed"/
|
|
713
|
+
~~~
|
|
714
|
+
|
|
715
|
+
renders as
|
|
716
|
+
|
|
717
|
+
~~~ html
|
|
718
|
+
<div id="not-closed"></div>
|
|
719
|
+
<div class="closed" />
|
|
720
|
+
<div id="closed" />
|
|
721
|
+
<div id="closed" />
|
|
722
|
+
~~~
|
|
723
|
+
|
|
724
|
+
Note, that this is usually not necessary since the standard html tags (img, br, ...) are closed automatically.
|
|
725
|
+
|
|
726
|
+
~~~ slim
|
|
727
|
+
img src="image.png"
|
|
728
|
+
~~~
|
|
729
|
+
|
|
730
|
+
renders as
|
|
731
|
+
|
|
732
|
+
~~~ html
|
|
733
|
+
<img src="image.png" />
|
|
734
|
+
~~~
|
|
735
|
+
|
|
736
|
+
### Trailing and leading whitespace
|
|
737
|
+
|
|
738
|
+
You can force a trailing whitespace behind a tag by adding `>`.
|
|
739
|
+
|
|
740
|
+
~~~ slim
|
|
741
|
+
a#closed> class="test" /
|
|
742
|
+
a#closed> class="test"/
|
|
743
|
+
a> href='url1' Link1
|
|
744
|
+
a< href='url1' Link1
|
|
745
|
+
~~~
|
|
746
|
+
|
|
747
|
+
renders as
|
|
748
|
+
|
|
749
|
+
~~~ html
|
|
750
|
+
<a class="test" id="closed" /> <a class="test" id="closed" /> <a href="url1">Link1</a> <a href="url1">Link1</a>
|
|
751
|
+
~~~
|
|
752
|
+
|
|
753
|
+
If you combine > and => only one trailing whitespace is added.
|
|
754
|
+
|
|
755
|
+
~~~ slim
|
|
756
|
+
a> => 'Text1'
|
|
757
|
+
a => 'Text2'
|
|
758
|
+
a> = 'Text3'
|
|
759
|
+
a>= 'Text4'
|
|
760
|
+
a=> 'Text5'
|
|
761
|
+
a<= 'Text6'
|
|
762
|
+
a=< 'Text7'
|
|
763
|
+
~~~
|
|
764
|
+
|
|
765
|
+
renders as
|
|
766
|
+
|
|
767
|
+
~~~ html
|
|
768
|
+
<a>Text1</a> <a>Text2</a> <a>Text3</a> <a>Text4</a> <a>Text5</a> <a>Text6</a> <a>Text7</a>
|
|
769
|
+
~~~
|
|
770
|
+
|
|
771
|
+
You can force a leading whitespace before a tag by adding `<`.
|
|
772
|
+
|
|
773
|
+
~~~ slim
|
|
774
|
+
a#closed< class="test" /
|
|
775
|
+
a#closed< class="test"/
|
|
776
|
+
a< href='url1' Link1
|
|
777
|
+
a< href='url2' Link2
|
|
778
|
+
~~~
|
|
779
|
+
|
|
780
|
+
~~~ html
|
|
781
|
+
<a class="test" id="closed" /> <a class="test" id="closed" /> <a href="url1">Link1</a> <a href="url2">Link2</a>
|
|
782
|
+
~~~
|
|
783
|
+
|
|
784
|
+
You can also combine both.
|
|
785
|
+
|
|
786
|
+
~~~ slim
|
|
787
|
+
a#closed<> class="test" /
|
|
788
|
+
a#closed>< class="test"/
|
|
789
|
+
a<> href='url1' Link1
|
|
790
|
+
a<> href='url2' Link2
|
|
791
|
+
~~~
|
|
792
|
+
|
|
793
|
+
~~~ html
|
|
794
|
+
<a class="test" id="closed" /> <a class="test" id="closed" /> <a href="url1">Link1</a> <a href="url2">Link2</a>
|
|
795
|
+
~~~
|
|
796
|
+
|
|
797
|
+
### Inline tags
|
|
798
|
+
|
|
799
|
+
Sometimes you may want to be a little more compact and inline the tags.
|
|
800
|
+
|
|
801
|
+
~~~ slim
|
|
802
|
+
ul
|
|
803
|
+
li.first: a href="/first" First
|
|
804
|
+
li: a href="/second" Second
|
|
805
|
+
~~~
|
|
806
|
+
|
|
807
|
+
renders as
|
|
808
|
+
|
|
809
|
+
~~~ html
|
|
810
|
+
<ul>
|
|
811
|
+
<li class="first">
|
|
812
|
+
<a href="/first">First</a>
|
|
813
|
+
</li>
|
|
814
|
+
<li>
|
|
815
|
+
<a href="/second">Second</a>
|
|
816
|
+
</li>
|
|
817
|
+
</ul>
|
|
818
|
+
~~~
|
|
819
|
+
|
|
820
|
+
For readability, don't forget you can wrap the attributes.
|
|
821
|
+
|
|
822
|
+
~~~ slim
|
|
823
|
+
ul
|
|
824
|
+
li.first: a(href="/first") First
|
|
825
|
+
li: a(href="/second") Second
|
|
826
|
+
~~~
|
|
827
|
+
|
|
828
|
+
renders as
|
|
829
|
+
|
|
830
|
+
~~~ html
|
|
831
|
+
<ul>
|
|
832
|
+
<li class="first">
|
|
833
|
+
<a href="/first">First</a>
|
|
834
|
+
</li>
|
|
835
|
+
<li>
|
|
836
|
+
<a href="/second">Second</a>
|
|
837
|
+
</li>
|
|
838
|
+
</ul>
|
|
839
|
+
~~~
|
|
840
|
+
|
|
841
|
+
### Text content
|
|
842
|
+
|
|
843
|
+
### Dynamic content `=`
|
|
844
|
+
|
|
845
|
+
### Attributes
|
|
846
|
+
|
|
847
|
+
#### Attribute wrapper
|
|
848
|
+
|
|
849
|
+
If a delimiter makes the syntax more readable for you, you can use the characters `{...}`, `(...)`, `[...]` to wrap the attributes.
|
|
850
|
+
|
|
851
|
+
~~~ slim
|
|
852
|
+
li
|
|
853
|
+
a(href="http://github.com/slim-template/slim" class="important") Link
|
|
854
|
+
li
|
|
855
|
+
a[href="http://github.com/slim-template/slim" class="important"] Link
|
|
856
|
+
li
|
|
857
|
+
a{href="http://github.com/slim-template/slim" class="important"} Link
|
|
858
|
+
~~~
|
|
859
|
+
|
|
860
|
+
renders as
|
|
861
|
+
|
|
862
|
+
~~~ html
|
|
863
|
+
<li>
|
|
864
|
+
<a class="important" href="http://github.com/slim-template/slim">Link</a>
|
|
865
|
+
</li>
|
|
866
|
+
<li>
|
|
867
|
+
<a class="important" href="http://github.com/slim-template/slim">Link</a>
|
|
868
|
+
</li>
|
|
869
|
+
<li>
|
|
870
|
+
<a class="important" href="http://github.com/slim-template/slim">Link</a>
|
|
871
|
+
</li>
|
|
872
|
+
~~~
|
|
873
|
+
|
|
874
|
+
If you wrap the attributes, you can spread them across multiple lines:
|
|
875
|
+
|
|
876
|
+
~~~ slim
|
|
877
|
+
a(href="http://github.com/slim-template/slim"
|
|
878
|
+
|
|
879
|
+
class="important") Link
|
|
880
|
+
~~~
|
|
881
|
+
|
|
882
|
+
renders as
|
|
883
|
+
|
|
884
|
+
~~~ html
|
|
885
|
+
<a class="important" href="http://github.com/slim-template/slim">Link</a>
|
|
886
|
+
~~~
|
|
887
|
+
|
|
888
|
+
~~~ slim
|
|
889
|
+
dl(
|
|
890
|
+
itemprop='address'
|
|
891
|
+
itemscope
|
|
892
|
+
itemtype='http://schema.org/PostalAddress'
|
|
893
|
+
)
|
|
894
|
+
~~~
|
|
895
|
+
|
|
896
|
+
renders as
|
|
897
|
+
|
|
898
|
+
~~~ html
|
|
899
|
+
<dl itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress"></dl>
|
|
900
|
+
~~~
|
|
901
|
+
|
|
902
|
+
You may use spaces around the wrappers and assignments:
|
|
903
|
+
|
|
904
|
+
~~~ slim
|
|
905
|
+
h1 id = "logo" Logo
|
|
906
|
+
h2 [ id = "tagline" ] Tagline
|
|
907
|
+
~~~
|
|
908
|
+
|
|
909
|
+
renders as
|
|
910
|
+
|
|
911
|
+
~~~ html
|
|
912
|
+
<h1 id="logo">
|
|
913
|
+
Logo
|
|
914
|
+
</h1>
|
|
915
|
+
<h2 id="tagline">
|
|
916
|
+
Tagline
|
|
917
|
+
</h2>
|
|
918
|
+
~~~
|
|
919
|
+
|
|
920
|
+
#### Quoted attributes
|
|
921
|
+
|
|
922
|
+
You can use single or double quotes for simple text attributes.
|
|
923
|
+
|
|
924
|
+
~~~ slim
|
|
925
|
+
a href="http://github.com/slim-template/slim" title='Slim Homepage' Goto the Slim homepage
|
|
926
|
+
~~~
|
|
927
|
+
|
|
928
|
+
renders as
|
|
929
|
+
|
|
930
|
+
~~~ html
|
|
931
|
+
<a href="http://github.com/slim-template/slim" title="Slim Homepage">Goto the Slim homepage</a>
|
|
932
|
+
~~~
|
|
933
|
+
|
|
934
|
+
You can use text interpolation in the quoted attributes:
|
|
935
|
+
|
|
936
|
+
~~~ slim
|
|
937
|
+
- url='github.com/slim-template/slim'
|
|
938
|
+
a href="http://#{url}" Goto the #{url}
|
|
939
|
+
a href="{"test"}" Test of quoted text in braces
|
|
940
|
+
~~~
|
|
941
|
+
|
|
942
|
+
renders as
|
|
943
|
+
|
|
944
|
+
~~~ html
|
|
945
|
+
<a href="http://github.com/slim-template/slim">Goto the github.com/slim-template/slim</a><a href="{"test"}">Test of quoted text in braces</a>
|
|
946
|
+
~~~
|
|
947
|
+
|
|
948
|
+
The attribute value will be escaped by default. Use == if you want to disable escaping in the attribute.
|
|
949
|
+
|
|
950
|
+
~~~ slim
|
|
951
|
+
li
|
|
952
|
+
a href='&' Link
|
|
953
|
+
li
|
|
954
|
+
a href=="&" Link
|
|
955
|
+
~~~
|
|
956
|
+
|
|
957
|
+
renders as
|
|
958
|
+
|
|
959
|
+
~~~ html
|
|
960
|
+
<li>
|
|
961
|
+
<a href="&">Link</a>
|
|
962
|
+
</li>
|
|
963
|
+
<li>
|
|
964
|
+
<a href="&">Link</a>
|
|
965
|
+
</li>
|
|
966
|
+
~~~
|
|
967
|
+
|
|
968
|
+
You can use newlines in quoted attributes
|
|
969
|
+
|
|
970
|
+
~~~ slim
|
|
971
|
+
a data-title="help" data-content="extremely long help text that goes on
|
|
972
|
+
and one and one and then starts over...." Link
|
|
973
|
+
~~~
|
|
974
|
+
|
|
975
|
+
renders as
|
|
976
|
+
|
|
977
|
+
~~~ html
|
|
978
|
+
<a data-content="extremely long help text that goes on
|
|
979
|
+
and one and one and then starts over...." data-title="help">Link</a>
|
|
980
|
+
~~~
|
|
981
|
+
|
|
982
|
+
You can break quoted attributes with an backslash `\`
|
|
983
|
+
|
|
984
|
+
~~~ slim
|
|
985
|
+
a data-title="help" data-content="extremely long help text that goes on\
|
|
986
|
+
and one and one and then starts over...." Link
|
|
987
|
+
~~~
|
|
988
|
+
|
|
989
|
+
renders as
|
|
990
|
+
|
|
991
|
+
~~~ html
|
|
992
|
+
<a data-content="extremely long help text that goes on and one and one and then starts over...." data-title="help">Link</a>
|
|
993
|
+
~~~
|
|
994
|
+
|
|
995
|
+
#### Ruby attributes
|
|
996
|
+
|
|
997
|
+
Long ruby attributes can be broken with backslash `\`
|
|
998
|
+
|
|
999
|
+
~~~ slim
|
|
1000
|
+
a href=1+\
|
|
1001
|
+
1 Link
|
|
1002
|
+
~~~
|
|
1003
|
+
|
|
1004
|
+
renders as
|
|
1005
|
+
|
|
1006
|
+
~~~ html
|
|
1007
|
+
<a href="2">Link</a>
|
|
1008
|
+
~~~
|
|
1009
|
+
|
|
1010
|
+
You don't need the explicit `\` if the line ends with a comma `,`.
|
|
1011
|
+
|
|
1012
|
+
~~~ slim
|
|
1013
|
+
ruby:
|
|
1014
|
+
def self.test(*args)
|
|
1015
|
+
args.join('-')
|
|
1016
|
+
end
|
|
1017
|
+
a href=test('arg1',
|
|
1018
|
+
'arg2',
|
|
1019
|
+
'arg3') Link
|
|
1020
|
+
~~~
|
|
1021
|
+
|
|
1022
|
+
renders as
|
|
1023
|
+
|
|
1024
|
+
~~~ html
|
|
1025
|
+
<a href="arg1-arg2-arg3">Link</a>
|
|
1026
|
+
~~~
|
|
1027
|
+
|
|
1028
|
+
#### Boolean attributes
|
|
1029
|
+
|
|
1030
|
+
The attribute values `true`, `false` and `nil` are interpreted as booleans.
|
|
1031
|
+
If you use the attribut wrapper you can omit the attribute assigment.
|
|
1032
|
+
|
|
1033
|
+
~~~ slim
|
|
1034
|
+
- true_value1 = ""
|
|
1035
|
+
- true_value2 = true
|
|
1036
|
+
input type="text" disabled=true_value1
|
|
1037
|
+
input type="text" disabled=true_value2
|
|
1038
|
+
input type="text" disabled="disabled"
|
|
1039
|
+
input type="text" disabled=true
|
|
1040
|
+
input(type="text" disabled)
|
|
1041
|
+
~~~
|
|
1042
|
+
|
|
1043
|
+
renders as
|
|
1044
|
+
|
|
1045
|
+
~~~ html
|
|
1046
|
+
<input disabled="" type="text" /><input disabled="" type="text" /><input disabled="disabled" type="text" /><input disabled="" type="text" /><input disabled="" type="text" />
|
|
1047
|
+
~~~
|
|
1048
|
+
|
|
1049
|
+
~~~ slim
|
|
1050
|
+
- false_value1 = false
|
|
1051
|
+
- false_value2 = nil
|
|
1052
|
+
input type="text" disabled=false_value1
|
|
1053
|
+
input type="text" disabled=false_value2
|
|
1054
|
+
input type="text"
|
|
1055
|
+
input type="text" disabled=false
|
|
1056
|
+
input type="text" disabled=nil
|
|
1057
|
+
~~~
|
|
1058
|
+
|
|
1059
|
+
renders as
|
|
1060
|
+
|
|
1061
|
+
~~~ html
|
|
1062
|
+
<input type="text" /><input type="text" /><input type="text" /><input type="text" /><input type="text" />
|
|
1063
|
+
~~~
|
|
1064
|
+
|
|
1065
|
+
If html5 is activated the attributes are written as standalone.
|
|
1066
|
+
|
|
1067
|
+
~~~ options
|
|
1068
|
+
:format => :html
|
|
1069
|
+
~~~
|
|
1070
|
+
|
|
1071
|
+
~~~ slim
|
|
1072
|
+
- true_value1 = ""
|
|
1073
|
+
- true_value2 = true
|
|
1074
|
+
input type="text" disabled=true_value1
|
|
1075
|
+
input type="text" disabled=true_value2
|
|
1076
|
+
input type="text" disabled="disabled"
|
|
1077
|
+
input type="text" disabled=true
|
|
1078
|
+
input(type="text" disabled)
|
|
1079
|
+
~~~
|
|
1080
|
+
|
|
1081
|
+
renders as
|
|
1082
|
+
|
|
1083
|
+
~~~ html
|
|
1084
|
+
<input disabled="" type="text"><input disabled type="text"><input disabled="disabled" type="text"><input disabled type="text"><input disabled type="text">
|
|
1085
|
+
~~~
|
|
1086
|
+
|
|
1087
|
+
#### Attribute merging
|
|
1088
|
+
|
|
1089
|
+
You can configure attributes to be merged if multiple are given (See option `:merge_attrs`). In the default configuration
|
|
1090
|
+
this is done for class attributes with the white space as delimiter.
|
|
1091
|
+
|
|
1092
|
+
~~~ slim
|
|
1093
|
+
a.menu class="highlight" href="http://github.com/slim-template/slim/" github.com/slim-template/slim
|
|
1094
|
+
~~~
|
|
1095
|
+
|
|
1096
|
+
renders as
|
|
1097
|
+
|
|
1098
|
+
~~~ html
|
|
1099
|
+
<a class="menu highlight" href="http://github.com/slim-template/slim/">github.com/slim-template/slim</a>
|
|
1100
|
+
~~~
|
|
1101
|
+
|
|
1102
|
+
You can also use an `Array` as attribute value and the array elements will be merged using the delimiter.
|
|
1103
|
+
|
|
1104
|
+
~~~ slim
|
|
1105
|
+
- classes = [:alpha, :beta]
|
|
1106
|
+
span class=["first","highlight"] class=classes First
|
|
1107
|
+
span class=:second,:highlight class=classes Second
|
|
1108
|
+
~~~
|
|
1109
|
+
|
|
1110
|
+
renders as
|
|
1111
|
+
|
|
1112
|
+
~~~ html
|
|
1113
|
+
<span class="first highlight alpha beta">First</span><span class="second highlight alpha beta">Second</span>
|
|
1114
|
+
~~~
|
|
1115
|
+
|
|
1116
|
+
#### Splat attributes `*`
|
|
1117
|
+
|
|
1118
|
+
|
|
1119
|
+
#### Dynamic tags `*`
|
|
1120
|
+
|
|
1121
|
+
You can create completely dynamic tags using the splat attributes. Just create a method which returns a hash
|
|
1122
|
+
with the :tag key.
|
|
1123
|
+
|
|
1124
|
+
~~~ slim
|
|
1125
|
+
ruby:
|
|
1126
|
+
def self.a_unless_current
|
|
1127
|
+
@page_current ? {tag: 'span'} : {tag: 'a', href: 'http://github.com/slim-template/slim/'}
|
|
1128
|
+
end
|
|
1129
|
+
- @page_current = true
|
|
1130
|
+
*a_unless_current Link
|
|
1131
|
+
- @page_current = false
|
|
1132
|
+
*a_unless_current Link
|
|
1133
|
+
~~~
|
|
1134
|
+
|
|
1135
|
+
renders as
|
|
1136
|
+
|
|
1137
|
+
~~~ html
|
|
1138
|
+
<span>Link</span><a href="http://github.com/slim-template/slim/">Link</a>
|
|
1139
|
+
~~~
|
|
1140
|
+
|
|
1141
|
+
### Shortcuts
|
|
1142
|
+
|
|
1143
|
+
#### Tag shortcuts
|
|
1144
|
+
|
|
1145
|
+
We add tag shortcuts by setting the option `:shortcut`.
|
|
1146
|
+
|
|
1147
|
+
~~~ options
|
|
1148
|
+
:shortcut => {'c' => {tag: 'container'}, 'sec' => {tag:'section'}, '#' => {attr: 'id'}, '.' => {attr: 'class'} }
|
|
1149
|
+
~~~
|
|
1150
|
+
|
|
1151
|
+
~~~ slim
|
|
1152
|
+
sec: c.content Text
|
|
1153
|
+
~~~
|
|
1154
|
+
|
|
1155
|
+
renders to
|
|
1156
|
+
|
|
1157
|
+
~~~ html
|
|
1158
|
+
<section>
|
|
1159
|
+
<container class="content">Text</container>
|
|
1160
|
+
</section>
|
|
1161
|
+
~~~
|
|
1162
|
+
|
|
1163
|
+
#### Attribute shortcuts
|
|
1164
|
+
|
|
1165
|
+
We add `&` to create a shortcut for the input elements with type attribute by setting the option `:shortcut`.
|
|
1166
|
+
|
|
1167
|
+
~~~ options
|
|
1168
|
+
:shortcut => {'&' => {tag: 'input', attr: 'type'}, '#' => {attr: 'id'}, '.' => {attr: 'class'} }
|
|
1169
|
+
~~~
|
|
1170
|
+
|
|
1171
|
+
~~~ slim
|
|
1172
|
+
&text name="user"
|
|
1173
|
+
&password name="pw"
|
|
1174
|
+
&submit.CLASS#ID
|
|
1175
|
+
~~~
|
|
1176
|
+
|
|
1177
|
+
renders to
|
|
1178
|
+
|
|
1179
|
+
~~~ html
|
|
1180
|
+
<input name="user" type="text" /><input name="pw" type="password" /><input class="CLASS" id="ID" type="submit" />
|
|
1181
|
+
~~~
|
|
1182
|
+
|
|
1183
|
+
This is stupid, but you can also use multiple character shortcuts.
|
|
1184
|
+
|
|
1185
|
+
~~~ options
|
|
1186
|
+
:shortcut => {'&' => {tag: 'input', attr: 'type'}, '#<' => {attr: 'id'}, '#>' => {attr: 'class'} }
|
|
1187
|
+
~~~
|
|
1188
|
+
|
|
1189
|
+
~~~ slim
|
|
1190
|
+
&text name="user"
|
|
1191
|
+
&password name="pw"
|
|
1192
|
+
&submit#>CLASS#<ID
|
|
1193
|
+
~~~
|
|
1194
|
+
|
|
1195
|
+
renders to
|
|
1196
|
+
|
|
1197
|
+
~~~ html
|
|
1198
|
+
<input name="user" type="text" /><input name="pw" type="password" /><input class="CLASS" id="ID" type="submit" />
|
|
1199
|
+
~~~
|
|
1200
|
+
|
|
1201
|
+
You can also set multiple attributes per shortcut.
|
|
1202
|
+
|
|
1203
|
+
~~~ options
|
|
1204
|
+
:shortcut => {'.' => {attr: %w(id class)} }
|
|
1205
|
+
~~~
|
|
1206
|
+
|
|
1207
|
+
~~~ slim
|
|
1208
|
+
.test
|
|
1209
|
+
~~~
|
|
1210
|
+
|
|
1211
|
+
renders to
|
|
1212
|
+
|
|
1213
|
+
~~~ html
|
|
1214
|
+
<div class="test" id="test"></div>
|
|
1215
|
+
~~~
|
|
1216
|
+
|
|
1217
|
+
Shortcuts can also have multiple characters.
|
|
1218
|
+
|
|
1219
|
+
~~~ options
|
|
1220
|
+
:shortcut => {'.' => {attr: 'class'}, '#' => {attr: 'id'}, '.#' => {attr: %w(class id)} }
|
|
1221
|
+
~~~
|
|
1222
|
+
|
|
1223
|
+
~~~ slim
|
|
1224
|
+
.#test
|
|
1225
|
+
.test
|
|
1226
|
+
#test
|
|
1227
|
+
~~~
|
|
1228
|
+
|
|
1229
|
+
renders to
|
|
1230
|
+
|
|
1231
|
+
~~~ html
|
|
1232
|
+
<div class="test" id="test"></div>
|
|
1233
|
+
<div class="test"></div>
|
|
1234
|
+
<div id="test"></div>
|
|
1235
|
+
~~~
|
|
1236
|
+
|
|
1237
|
+
#### ID shortcut and class shortcut `.`
|
|
1238
|
+
|
|
1239
|
+
ID and class shortcuts can contain dashes, slashes with digits, and colons.
|
|
1240
|
+
|
|
1241
|
+
~~~ slim
|
|
1242
|
+
.-test text
|
|
1243
|
+
#test- text
|
|
1244
|
+
.--a#b- text
|
|
1245
|
+
.a--test-123#--b text
|
|
1246
|
+
.a-1/2#b-1/2 text
|
|
1247
|
+
.ab:c-test#d:e text
|
|
1248
|
+
~~~
|
|
1249
|
+
|
|
1250
|
+
renders as
|
|
1251
|
+
|
|
1252
|
+
~~~ html
|
|
1253
|
+
<div class="-test">
|
|
1254
|
+
text
|
|
1255
|
+
</div>
|
|
1256
|
+
<div id="test-">
|
|
1257
|
+
text
|
|
1258
|
+
</div>
|
|
1259
|
+
<div class="--a" id="b-">
|
|
1260
|
+
text
|
|
1261
|
+
</div>
|
|
1262
|
+
<div class="a--test-123" id="--b">
|
|
1263
|
+
text
|
|
1264
|
+
</div>
|
|
1265
|
+
<div class="a-1/2" id="b-1/2">
|
|
1266
|
+
text
|
|
1267
|
+
</div>
|
|
1268
|
+
<div class="ab:c-test" id="d:e">
|
|
1269
|
+
text
|
|
1270
|
+
</div>
|
|
1271
|
+
~~~
|
|
1272
|
+
|
|
1273
|
+
## Text interpolation
|
|
1274
|
+
|
|
1275
|
+
Use standard Ruby interpolation. The text will be html escaped by default.
|
|
1276
|
+
|
|
1277
|
+
~~~ slim
|
|
1278
|
+
- user="John Doe <john@doe.net>"
|
|
1279
|
+
h1 Welcome #{user}!
|
|
1280
|
+
~~~
|
|
1281
|
+
|
|
1282
|
+
renders as
|
|
1283
|
+
|
|
1284
|
+
~~~ html
|
|
1285
|
+
<h1>
|
|
1286
|
+
Welcome John Doe <john@doe.net>!
|
|
1287
|
+
</h1>
|
|
1288
|
+
~~~
|
|
1289
|
+
|
|
1290
|
+
## Pretty printing of XML
|
|
1291
|
+
|
|
1292
|
+
We can enable XML mode with
|
|
1293
|
+
|
|
1294
|
+
~~~ options
|
|
1295
|
+
:format => :xml
|
|
1296
|
+
~~~
|
|
1297
|
+
|
|
1298
|
+
~~~ slim
|
|
1299
|
+
doctype xml
|
|
1300
|
+
document
|
|
1301
|
+
closed-element/
|
|
1302
|
+
element(boolean-attribute)
|
|
1303
|
+
child attribute="value"
|
|
1304
|
+
| content
|
|
1305
|
+
~~~
|
|
1306
|
+
|
|
1307
|
+
~~~ html
|
|
1308
|
+
<?xml version="1.0" encoding="utf-8" ?>
|
|
1309
|
+
<document>
|
|
1310
|
+
<closed-element />
|
|
1311
|
+
<element boolean-attribute="">
|
|
1312
|
+
<child attribute="value">
|
|
1313
|
+
content
|
|
1314
|
+
</child>
|
|
1315
|
+
</element>
|
|
1316
|
+
</document>
|
|
1317
|
+
~~~
|
|
1318
|
+
|
|
1319
|
+
## Embedded engines
|
|
1320
|
+
|
|
1321
|
+
## Configuring Slim
|
|
1322
|
+
|
|
1323
|
+
## Plugins
|