I had a hard time getting the syntax highlighter to work using makeup - had to spend a lot of time understanding makeup and makeup_html. I have used syntax highlighters like highlight.js, Pygments, Prism.js in the past.

Pygments is an inspiration for makeup - but the output differs between both. makeup_html lexer generates tokens slightly differently when compared Pygments. I had logged couple of bugs on makeup_html repository.

I had to modify the default lexer add a function to lex non standard html elements - Makeup.Lexers.Bootstrap.HTMLLexer.lex.

Leaving these notes here so that others can save some time if they have to highlight code using makeup and phoenix components

I’d suggest moving the formatting out of the heex sigil:

  def highlight(assigns) do
    formatted = 
      assigns.inner_block
      |> render_slot() 
      |> Phoenix.HTML.html_escape() 
      |> Phoenix.HTML.safe_to_string() 
      |> Makeup.Lexers.Bootstrap.HTMLLexer.lex() 
      |> Makeup.Formatters.HTML.HTMLFormatter.format_inner_as_binary([]) 
      |> Phoenix.HTML.raw()

    assigns = assign(assigns, :formatted, formatted)

    ~H"""
    <pre class="chroma"><code class="language-html"><%= @formatted %></code></pre>
    """
  end

Besides being easier to maintain it should also make it clear that the formatted code is not granularly change tracked when used in LiveView.