Packages
mdex
0.11.6
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"}
])
```
## 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
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)
```