Pretty print struct in HTML format for live view

Phoenix Forum Questions / Help
1

Just wondering if anybody has written anything like inspect() that will output in HTML format suitable for inclusion in a live view?

Not a problem if it hasn’t been done, I can do it myself. But don’t want to do it if it has already been done…

Yes, I know, I probably could get away with outputting inspect() surrounded by <pre>…</pre> tags. But looking for something fancier. Color coding, etc.

1 Like
2

You could JSON encode it and use highlight.js which is a step up from raw pre tags. Not sure if you just want a “nicer developer view” or to encode your data in say, full table>tr>td structures to automatically dump data for user consumption, which I haven’t seen personally.

3

Thanks for the suggestion. It also looks like highlight.js supports Elixr too, so presumably I don’t have to JSON encode it first.

Unfortunately highlight.js may not be such a good choice for a live view, because I think it modifies the HTML DOM, and ends up fighting the live view.

Unless of course there is some clever solution I haven’t discovered yet.

4

You can probably get by with a small custom phx-hook to fire highlight.js (depending on hl.js), or maybe a combination of phx-update on nested elements and generating some kind of unique id per structure you want to render.