Attributes

Attributes can be assigned in similar fashion to output:

a href="elixir-lang.org" target="_blank" Elixir
<a href="elixir-lang.org" target="_blank">Elixir</a>

Elixir expressions can be used as attribute values using the interpolation syntax: 

- my_variable = "elixir-lang.org"
a href="#{my_variable}" Elixir
<a href="elixir-lang.org">Elixir</a>

Boolean attributes can be set using boolean values: 

input type="checkbox" checked=true
input type="checkbox" checked=false
<input type="checkbox" checked>
<input type="checkbox">

There is a literal syntax for class and id attributes:

.foo.bar
select.bar
#foo
body#bar
<div class="foo bar"></div>
<select class="bar"></select>
<div id="foo"></div>
<body id="bar"></body>

Elixir code

Elixir can be written inline using - and =.
- evalutes the expression.
= evalutes the expression, and inserts the value of the expression. 

- number = 40
p = number + 2
<p>42</p>

The interpolation syntax can be used to insert expressions into text:

- name = "Felix"
p My cat's name is #{name}
<p>My cat's name is Felix</p>

Comments

Lines can be commented out using the `/` character:

/ p This line is commented out
p This line is not
<p>This line is not</p>

HTML comments can be inserted using /!

/! Hello, world!
<!--Hello, world!-->

Conditionals

We can use the regular Elixir flow control such as the if expression:

- condition = true
= if condition do
  p It was true.
- else
  p It was false.
<p>It was true.</p>

Doctypes

There are shortcuts for common doctypes:

doctype html
doctype xml
doctype transitional
doctype strict
doctype frameset
doctype 1.1
doctype basic
doctype mobile
<!DOCTYPE html>
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

Iteration

Elixir's collection manipulation expressions can be used to iterate over collections in your templates: 

/ with Enum.map:
- names = ["Sarah", "Mia", "Harry"]
= Enum.map names, fn name ->
  p= name
<p>Sarah</p>
<p>Mia</p>
<p>Harry</p>
/ or with comprehension
- names = ["Sarah", "Mia", "Harry"]
= for name <- names do
  p= name
<p>Sarah</p>
<p>Mia</p>
<p>Harry</p>

Embedded engines 

javascript:
  console.log("Test javascript");

css:
  body {
    color: black;
  }

elixir:
  a = [1, 2, 3]
  b = Enum.map(a, &(&1 + 1))

eex:
  Hello from <%= "eex" %>