# Phoenix LiveView HEEx

```elixir
Mix.install(
  [
    {:mdex, ">= 0.13.3"},
    {:lumis, ">= 0.6.1"},
    {:phoenix_playground, "~> 0.1"},
    {:req_embed, "~> 0.3"}
  ],
  config: [
    mdex_native: [syntax_highlighter: :lumis]
  ]
)
```

## Intro

MDEx integrates with Phoenix LiveView, allowing you to write Markdown that includes Phoenix components, `phx-*` bindings, and Elixir expressions. Use the `~MD[...]HEEX` sigil modifier to compile Markdown templates with full HEEx support. See the [HEEx Integration guide](https://hexdocs.pm/mdex/heex.html) for more details.

## Example

````elixir
defmodule MarkdownLive do
  use Phoenix.LiveView

  use MDEx,
    syntax_highlight: [
      engine: :lumis,
      opts: [formatter: {:html_inline, theme: "github_light"}]
    ]

  def mount(_params, _session, socket) do
    {:ok, assign(socket, message: "Have a nice day", count: 0)}
  end

  def render(assigns) do
    ~H"""
    <script src="https://cdn.tailwindcss.com?plugins=typography"></script>

    <main class="prose prose-zinc max-w-3xl mx-auto px-6 py-10">
      {markdown(assigns)}
    </main>
    """
  end

  defp markdown(assigns) do
    ~MD"""
    # Demo

    Hello from MDEx :wave:

    **Markdown** and **HEEx** together!

    Today is _{Calendar.strftime(DateTime.utc_now(), "%B %d, %Y")}_

    ---

    ## Code braces

    Inline `%{}` should show as `%{}`.

    ```elixir
    %{}
    {:ok, %{name: "MDEx"}}
    fn = fn -> :ok end
    ```

    ---

    <div class="flex items-center gap-4 p-6 bg-white/10 rounded-xl my-6 not-prose">
      <button phx-click="dec" class="w-10 h-10 rounded-full bg-red-500 text-white text-xl font-bold">-</button>
      <span class="text-3xl font-bold">{@count}</span>
      <button phx-click="inc" class="w-10 h-10 rounded-full bg-green-500 text-white text-xl font-bold">+</button>
    </div>

    <%= @message %>
    <ReqEmbed.embed url="https://www.youtube.com/watch?v=XfELJU1mRMg" class="aspect-video rounded-xl my-6" />

    ---

    Built with:
    - <.link href="https://crates.io/crates/comrak">comrak</.link>
    - <.link href="https://hex.pm/packages/mdex">MDEx</.link>
    """HEEX
  end

  def handle_event("inc", _, socket), do: {:noreply, update(socket, :count, &(&1 + 1))}
  def handle_event("dec", _, socket), do: {:noreply, update(socket, :count, &(&1 - 1))}
end
````

```elixir
PhoenixPlayground.start(live: MarkdownLive, open_browser: true)
```