Filters

Filters are a way to add a large block of content to a Haml or Slim 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.

Filter	Haml	Slim	EGO
`:plain`	Yes	No	Use normal HTML/text
`:escaped`	Yes	No	Use escaped output `<%= value %>`
`:preserve`	Yes	No	Use normal HTML/text
`:javascript`	Yes	Yes	Use `<script>`
`:css`	Yes	Yes	Use `<style>`

EGO templates do not use filter syntax because they already use normal HTML.

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 &lt;em&gt;escaped&lt;/em&gt; text
&lt;strong&gt;Hello, World!&lt;/strong&gt;

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&#x000A;<strong>Hello, World!</strong>