HTML tags not being interpreted in LiveView

I have some Markdown that I want to embed in a LiveView, and I am using the phoenix_markdown library which seems to be working fine, it generates HTML that reflects the structure, however in the LiveView it gets rendered as plaintext, and the strange thing is if I save the page source and open it in the browser it renders correctly, just not when being served from the application.
Even taking the Markdown stuff out of the equation, if I just for example put <h1> tags around a line in the heex template, it does not affect the styling, but saving the rendered page source and opening as a file works.
Any clues as to what I am missing here?
Thanks!

Possibly raw?

https://hexdocs.pm/phoenix_html/Phoenix.HTML.html

no I tried that, no difference :frowning:

Can you provide some more information like the some of the code you’re using? If you view:source in the browser what HTML do you see generated?

Ok so here is the Markdown I am trying to display, it lives in a template/filename.html.md:

# Title
Subheading 

List 
  * List Item 1
  * List Item 2

This is how it’s rendered in the browser:

This is the source snippet after all the standard Phoenix stuff, doing View Source on the running application:

Screen Shot 2022-01-28 at 8.44.26 PM

This is what it looks like when I copy the source into a file and open it locally in the browser:

Inside the LiveView template I am calling a standard view that wraps the call to the phoenix_markdown library because it doesn’t support live view, but from here on out I don’t think it’s an issue because I can add standard HTML tags here and the same thing will happen, plain text on the running application and correctly formatted on the local file:

<div>
    <%= MkrandioWeb.DesignNotes.render_html "airplane.html" %>
</div>

The wrapper view us just:

 def render_html(file) do
    render(file, assigns: nil)
  end

which because the template is Markdown will get sent through the phoenix_markdown template engine, but I want to stress that I don’t think it has anything to do with all that Markdown stuff since I get the same behavior just trying to put standard HTML tags in the top level heex template.

Right, I think this is mostly just a CSS thing then. CSS isn’t really my thing, so maybe someone else can weigh in, but the presence of absence of the default CSS is the difference between opening the raw HTML in your browser and including it inside the phoenix page.

oh man I was hoping it wasn’t that, but I am running Tailwind and thought that might be to blame, I’’ post here if I figure it out, thanks!

Can you comment all style sheet includes in the page (root.html.heex) and check ?

It sounds like the tailwind resets are causing this - one way to verify could be to manually create some styles for the elements you’re using to see if they’re applied.

You may also want to look at Tailwind Typography, which is meant to handle this case. By applying a “prose” class to the enclosing tag, you’ll have a set of tailwind defaults for this kind of content.

2 Likes

We also use Tailwind on Livebook and we also render markdown. What we do is that we put all markdown inside a <section class="markdown"> and we use this bit of CSS to style it. Feel free to reuse it:

5 Likes

OMG! Ok first of all thank you for the solution, but let me take this unbelievable opportunity to also thank you for Elixir and the fantastic community that has grown up around it. I am a 50 year old developer that had a successful career in automation but then slowly became disillusioned with the lack of progress in software technology, I spent a couple of years trying to make sense of Javascript and only producing brittle and weak applications.
I had taken a look at Erlang years ago but found it too esoteric and idiosyncratic. But then I came across Elixir and finally there was something beautiful and powerful and built around a cohesive thought process.
So thank you, for bringing beauty and power to the software world through your efforts. I am still just a beginner but I am dedicating the next part of my career to mastering it and I am excited about the things I will be able to build.

8 Likes