Earmark live_view component


I want to write a component to display markdown:

# Hi there

* test

My current component looks like this:

def markdown(assigns) do
    <%= Earmark.as_html!(@inner_block, code_class_prefix: "lang- language-") |> Phoenix.HTML.raw() %>

but @inner_block is not the “text” content from the block. Any idea on how to get to that content, or how to solve this problem in a different way?

@inner_block is just a reference to a slot. If you want the contents then you need to render the slot with render_slot/2. Also while it may be fine with markdown I’m not sure you can have arbitrary text as slot content with heex.

Thanks, this is what works, but it feels wrong

      <%= render_slot(@inner_block)
      |> then(fn %{static: [code]} ->
        code = String.trim(code)
        Earmark.as_html!(code, code_class_prefix: "lang- language-") |> Phoenix.HTML.raw()
      end) %>

I’m starting to think my approach is not really possible…
The heex formatter keeps realigning my markdown code and so it breaks.

Too bad, would’ve been nice to write

# Hello

## A list

* first item
* second item

I know it’s not LiveView but Surface UI has a Markdown Component. Maybe you can have a look and see if you can get some hints/ideas from it?

1 Like

Isn’t there the phx-no-format attribute for the formatter?

1 Like

Indeed, thanks :heart: