Phoenix HEEx · Comrak

$ comrak -e phoenix-heex -t commonmark -t xml

Click <.button>here</.button> to continue

<p>Click <.button>here</.button> to continue</p>

Click <.button>here</.button> to continue

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE document SYSTEM "CommonMark.dtd">
<document xmlns="http://commonmark.org/xml/1.0">
  <paragraph>
    <text xml:space="preserve">Click </text>
    <heex_inline xml:space="preserve">&lt;.button&gt;</heex_inline>
    <text xml:space="preserve">here</text>
    <heex_inline xml:space="preserve">&lt;/.button&gt;</heex_inline>
    <text xml:space="preserve"> to continue</text>
  </paragraph>
</document>

$ comrak -e phoenix-heex -t commonmark -t xml

User {user.name} has {user.age} items

<p>User {user.name} has {user.age} items</p>

User {user.name} has {user.age} items

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE document SYSTEM "CommonMark.dtd">
<document xmlns="http://commonmark.org/xml/1.0">
  <paragraph>
    <text xml:space="preserve">User </text>
    <heex_inline xml:space="preserve">{user.name}</heex_inline>
    <text xml:space="preserve"> has </text>
    <heex_inline xml:space="preserve">{user.age}</heex_inline>
    <text xml:space="preserve"> items</text>
  </paragraph>
</document>

$ comrak -e phoenix-heex -t commonmark -t xml

Value: {user.name} or <%= @user.name %>

<p>Value: {user.name} or <%= @user.name %></p>

Value: {user.name} or <%= @user.name %>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE document SYSTEM "CommonMark.dtd">
<document xmlns="http://commonmark.org/xml/1.0">
  <paragraph>
    <text xml:space="preserve">Value: </text>
    <heex_inline xml:space="preserve">{user.name}</heex_inline>
    <text xml:space="preserve"> or </text>
    <heex_inline xml:space="preserve">&lt;%= @user.name %&gt;</heex_inline>
  </paragraph>
</document>

$ comrak -e phoenix-heex -t commonmark -t xml

I am some text!
<%# Look a comment! %>
I am more some text!

<p>I am some text!
<%# Look a comment! %>
I am more some text!</p>

I am some text\!
<%# Look a comment! %>
I am more some text\!

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE document SYSTEM "CommonMark.dtd">
<document xmlns="http://commonmark.org/xml/1.0">
  <paragraph>
    <text xml:space="preserve">I am some text!</text>
    <softbreak />
    <heex_inline xml:space="preserve">&lt;%# Look a comment! %&gt;</heex_inline>
    <softbreak />
    <text xml:space="preserve">I am more some text!</text>
  </paragraph>
</document>

$ comrak -e phoenix-heex -t commonmark -t xml

# Contact Form

<.form
  for={@form}
  phx-change="change_name"
>
  <.input field={@form[:email]} />
</.form>

## Footer

Socials

<h1>Contact Form</h1>
<.form
  for={@form}
  phx-change="change_name"
>
  <.input field={@form[:email]} />
</.form>
<h2>Footer</h2>
<p>Socials</p>

# Contact Form

<.form
  for={@form}
  phx-change="change_name"
>
  <.input field={@form[:email]} />
</.form>

## Footer

Socials

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE document SYSTEM "CommonMark.dtd">
<document xmlns="http://commonmark.org/xml/1.0">
  <heading level="1">
    <text xml:space="preserve">Contact Form</text>
  </heading>
  <heex_block xml:space="preserve">&lt;.form
  for={@form}
  phx-change=&quot;change_name&quot;
&gt;
  &lt;.input field={@form[:email]} /&gt;
&lt;/.form&gt;
</heex_block>
  <heading level="2">
    <text xml:space="preserve">Footer</text>
  </heading>
  <paragraph>
    <text xml:space="preserve">Socials</text>
  </paragraph>
</document>

$ comrak -e phoenix-heex -t commonmark -t xml

<MyComponent>

  Content here

</MyComponent>

<MyComponent>

  Content here

</MyComponent>

<MyComponent>

  Content here

</MyComponent>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE document SYSTEM "CommonMark.dtd">
<document xmlns="http://commonmark.org/xml/1.0">
  <heex_block xml:space="preserve">&lt;MyComponent&gt;

  Content here

&lt;/MyComponent&gt;
</heex_block>
</document>

$ comrak -e phoenix-heex -t commonmark -t xml

<.modal>
  <:header>
    This is the top of the modal.
  </:header>
  This is the content of the modal.
</.modal>

<.modal>
  <:header>
    This is the top of the modal.
  </:header>
  This is the content of the modal.
</.modal>

<.modal>
  <:header>
    This is the top of the modal.
  </:header>
  This is the content of the modal.
</.modal>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE document SYSTEM "CommonMark.dtd">
<document xmlns="http://commonmark.org/xml/1.0">
  <heex_block xml:space="preserve">&lt;.modal&gt;
  &lt;:header&gt;
    This is the top of the modal.
  &lt;/:header&gt;
  This is the content of the modal.
&lt;/.modal&gt;
</heex_block>
</document>

$ comrak -e phoenix-heex -t commonmark -t xml

<.table rows={@users}>
  <:col :let={user} label="Name">
    {user.name}
  </:col>
  <:col :let={user} label="Email">
    {user.email}
  </:col>
</.table>

<.table rows={@users}>
  <:col :let={user} label="Name">
    {user.name}
  </:col>
  <:col :let={user} label="Email">
    {user.email}
  </:col>
</.table>

<.table rows={@users}>
  <:col :let={user} label="Name">
    {user.name}
  </:col>
  <:col :let={user} label="Email">
    {user.email}
  </:col>
</.table>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE document SYSTEM "CommonMark.dtd">
<document xmlns="http://commonmark.org/xml/1.0">
  <heex_block xml:space="preserve">&lt;.table rows={@users}&gt;
  &lt;:col :let={user} label=&quot;Name&quot;&gt;
    {user.name}
  &lt;/:col&gt;
  &lt;:col :let={user} label=&quot;Email&quot;&gt;
    {user.email}
  &lt;/:col&gt;
&lt;/.table&gt;
</heex_block>
</document>

$ comrak -e phoenix-heex -t commonmark -t xml

<%= if true do %>
  <%= @x %>
<% end %>

<%= if true do %>
  <%= @x %>
<% end %>

<%= if true do %>

  <%= @x %>

<% end %>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE document SYSTEM "CommonMark.dtd">
<document xmlns="http://commonmark.org/xml/1.0">
  <heex_block xml:space="preserve">&lt;%= if true do %&gt;
</heex_block>
  <heex_block xml:space="preserve">  &lt;%= @x %&gt;
</heex_block>
  <heex_block xml:space="preserve">&lt;% end %&gt;
</heex_block>
</document>

$ comrak -e phoenix-heex --unsafe -t commonmark -t xml

<div :for={item <- @items}>
  <%= item %>
</div>

<div :for={item <- @items}>
  <%= item %>
</div>

<div :for={item <- @items}>
  <%= item %>
</div>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE document SYSTEM "CommonMark.dtd">
<document xmlns="http://commonmark.org/xml/1.0">
  <html_block xml:space="preserve">&lt;div :for={item &lt;- @items}&gt;
  &lt;%= item %&gt;
&lt;/div&gt;
</html_block>
</document>

$ comrak -e phoenix-heex -e table -t commonmark -t xml

<.wrapper>

| a | b |
|---|---|
| c | d |

</.wrapper>

<.wrapper>

| a | b |
|---|---|
| c | d |

</.wrapper>

<.wrapper>

| a | b |
|---|---|
| c | d |

</.wrapper>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE document SYSTEM "CommonMark.dtd">
<document xmlns="http://commonmark.org/xml/1.0">
  <heex_block xml:space="preserve">&lt;.wrapper&gt;

| a | b |
|---|---|
| c | d |

&lt;/.wrapper&gt;
</heex_block>
</document>

$ comrak -e phoenix-heex -t commonmark -t xml

- <.button>
    text
  </.button>

<ul>
<li>
<.button>
  text
</.button>
</li>
</ul>

- 
  
  <.button>
    text
  </.button>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE document SYSTEM "CommonMark.dtd">
<document xmlns="http://commonmark.org/xml/1.0">
  <list type="bullet" tight="true">
    <item>
      <heex_block xml:space="preserve">&lt;.button&gt;
  text
&lt;/.button&gt;
</heex_block>
    </item>
  </list>
</document>

$ comrak -e phoenix-heex -t commonmark -t xml

Header: <:title>My Title</:title>

<p>Header: &lt;:title&gt;My Title&lt;/:title&gt;</p>

Header: \<:title\>My Title\</:title\>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE document SYSTEM "CommonMark.dtd">
<document xmlns="http://commonmark.org/xml/1.0">
  <paragraph>
    <text xml:space="preserve">Header: &lt;:title&gt;My Title&lt;/:title&gt;</text>
  </paragraph>
</document>