Use Makeup to display data in your Phoenix UI
Here at Simplebet, we work on a product that is primarily centered around data. For our internal tools, we often want to be able to view the contents of raw messages for inspection, debugging, and testing. By combining Phoenix templates with the Makeup source code highlighter, it couldn’t be easier.
To get started, add makeup
and makeup_elixir
to your project. (Fun fact, Makeup
is the tool that ex_doc
uses to generate that beautifully printed source code in all Elixir documentation)
{:makeup, "~> 1.0"},
{:makeup_elixir, "~> 0.15.0"},
Then you can render your data like this
<div class="m-2 overflow-hidden shadow-lg">
<style>
<%= raw Makeup.stylesheet(Makeup.Styles.HTML.StyleMap.friendly_style()) %>
</style>
<%= raw Makeup.highlight(inspect(@message.message, pretty: true)) %>
</div>
The best part, Makeup has a list of stylesheets that you can choose from. I chose “friendly”, but there are many more. Enjoy!