Packages
mdex
0.11.0
0.13.3
0.13.2
0.13.1
0.13.0
0.12.5
retired
0.12.4
0.12.3
0.12.2
0.12.1
0.12.0
0.11.7
0.11.6
0.11.5
0.11.4
0.11.3
0.11.2
0.11.1
0.11.0
0.10.0
0.9.4
0.9.3
0.9.2
0.9.1
0.9.0
0.8.6
0.8.5
0.8.4
0.8.3
0.8.2
0.8.1
0.8.0
0.7.5
0.7.4
0.7.3
0.7.2
0.7.1
0.7.0
0.6.2
0.6.1
0.6.0
0.5.0
0.4.3
0.4.2
0.4.1
0.4.0
0.3.3
0.3.2
0.3.1
0.3.0
0.2.0
0.1.18
0.1.17
0.1.16
0.1.15
0.1.14
0.1.13
0.1.12
0.1.11
0.1.10
0.1.9
0.1.8
0.1.7
0.1.6
0.1.5
0.1.4
0.1.3
0.1.2
0.1.1
0.1.0
Fast and extensible Markdown for Elixir
Security advisory:
This version has known vulnerabilities.
View advisories
Current section
Files
Jump to
Current section
Files
examples/phoenix_live_view_heex.livemd
# Phoenix LiveView HEEx
```elixir
Mix.install([
{:mdex, "~> 0.11"},
{:phoenix_playground, "~> 0.1"},
{:req_embed, "~> 0.3"}
])
```
## Example
```elixir
defmodule MarkdownLive do
use Phoenix.LiveView
import MDEx.Sigil
def mount(_params, _session, socket) do
{:ok, assign(socket, message: "Have a nice day", count: 0)}
end
def render(assigns) do
~MD"""
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
<div class="prose lg:prose-xl max-w-2xl mx-auto p-8">
# Demo
Hello from MDEx :wave:
**Markdown** and **HEEx** together!
Today is _{Calendar.strftime(DateTime.utc_now(), "%B %d, %Y")}_
---
<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>
</div>
"""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)
```