Hi there! With the release of MDEx v0.11.0 which adds support for Phoenix components. I have been trying to render the markdown with phoenix components in it, but I’m not able to do that.
Here’s how my system is working:
I have some markdown files that roughly look like this:
%{ title: "First blog", description: "a description" }
---
# Hello World
<.button>This is a button</.button>
and I use nimble_publisher with MDEx to compile these markdown files into HTML:
# Using Nimble publisher
defmodule MyApp.Blog do
use NimblePublisher,
build: MyApp.Blog.Article,
from: Application.app_dir(:my_app, "priv/posts/*.md"),
as: :blogs,
html_converter: MyApp.Converter
def all_blogs, do: @blogs
end
# MyApp.Blog.Article
defmodule MyApp.Blog.Article do
defstruct title: "",,
description: "",
body: ""
def build(filepath, attrs, body) do
struct!(
__MODULE__,
[body: body] ++ Map.to_list(attrs)
)
end
end
# MyApp.Converter
defmodule MyApp.Converter do
def convert(_path, body, attrs, _opts) do
MDEx.to_html!(body, extension: [phoenix_heex: true, autolink: true, header_ids: ""])
end
end
Here’s how the compiled markdown looks like:
<h1><a href=\"#hello-world\" aria-hidden=\"true\" class=\"anchor\" id=\"hello-world\"></a>Hello World</h1>\n<.button>This is a button</.button>
And In my LiveView, I don’t have any idea how to get Phoenix to render the components:
defmodule MyApp.BlogLive.Show do
use MyAppWeb, :live_view
alias MyApp.Blog
@impl true
def mount(_params, _session, socket) do
[blog] = Blog.all_blogs()
%{body: body} = blog
{:ok, socket |> assign(body: body)}
end
@impl true
def render(assigns) do
~H"""
<Layouts.app>
{raw(@body)}
</Layouts.app>
"""
end
end
I understand that raw function won’t work because It’ll just render the HTML part.
How do I get Phoenix to render the HTML along with Phoenix components here?
Any help is appreciated!
