Filters
Filters are a way to add a large block of content to your template. This is useful for adding content that is not HTML, such as CSS or JavaScript. Filters are added to the template using the colon : character followed by the name of the filter. There are five built-in filters: css, javascript, plain, escaped, and preserve.
CSS
The :css filter is used to add CSS to your templates. The CSS content is added to the template as is.
:css
body {
background-color: #f0f0f0;
}renders as:
<style>
body {
background-color: #f0f0f0;
}
</style>The :css filter also supports interpolation.
JavaScript
The :javascript filter is used to add JavaScript to your templates. The JavaScript content is added to the template as is.
:javascript
alert("Hello, World!");renders as:
<script>
alert("Hello, World!");
</script>The :javascript filter also supports interpolation.
Plain text
The :plain filter is used to add a block of plain text to your templates. Interpolated values and expressions will be unescaped. Meaning if you include HTML in the values, then you will be getting HTML in your output.
- value := "<strong>Hello, World!</strong>"
:plain
This is <em>plain</em> text
#{value}renders as:
This is <em>plain</em> text
<strong>Hello, World!</strong>Escaped text
The :escaped filter is used to add a block of escaped text to your templates.
All plain text, interpolated values, and expressions will be escaped.
- value := "<strong>Hello, World!</strong>"
:escaped
This is <em>escaped</em> text
#{value}renders as:
This is <em>escaped</em> text
<strong>Hello, World!</strong>Preserved text
The :preserve filter is used to add a block of preserved text to your templates. Like the :plain filter, interpolated values and expressions will be unescaped. The newlines and leading whitespace will be preserved.
- value := "<strong>Hello, World!</strong>"
:preserve
This is <em>preserved</em> text
#{value}renders as:
This is <em>preserved</em> text
<strong>Hello, World!</strong>