Format dart code as html

Issue

I am knocking together a quick debugging view of a backend, as a small set of admin HTML pages (driven by angulardart, but not sure that is critical).

I get back from my XHR call a complex JSON object. I want to see that on the HTML page formatted nicely. It doesn’t have to be a great implementation, as its just a debug ui, but the goal is to format the object instead of having it be one long string with no newlines.

I looked at trying to pretty print JSON in dart then putting that inside <pre></pre> tags, as well as just dumping the dart Map object to string (again, inside or not inside <pre></pre> tags. But not getting to where I want.

Even searched pub for something similar, such as a syntax highlighter that would output html, but didn’t find something obvious.

Any recommendations?

Solution

I think what you’re looking for is:

  1. Format your JSON so it’s readable
  2. Have syntax highlight

For 1 – This can be done with JsonEncoder with indent

For 2 – You can use the JS lib called HighlightJs pretty easily by appending your formatted json into a marked-up div. (See highlightjs’ doc to see what I mean)

Answered By – Pacane

Answer Checked By – David Goodson (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *