Is there a way to format a JSON response nicely after it has been loaded dynamically in prism ()? Currently, I am seeing the Json syntax highlighted all in one row:
{"status":200,"success":true,"message":"Success! Record(s) available!","data":[{"title":"Item 1"},{"title":"Item 2"}]}
What I desire is the original formatted structure like this:
{
"status": 200,
"success": true,
"message": "Success! Record(s) available!",
"data": [
{
"title": "Item 1"
},
{
"title": "Item 2"
}
]
}
This is how my setup looks:
HTML:
<pre><code class="language-json"></code></pre>
Javascript:
let code = {
"status": 200,
"success": true,
"message": "Success! Record(s) available!",
"data": [
{
"title": "Item 1"
},
{
"title": "Item 2"
}
]
};
console.log(JSON.stringify(code));
document.querySelector('.language-json').innerHTML = Prism.highlight(JSON.stringify(code), Prism.languages.json, 'json');
You can also check out a Fiddle with this code here: https://jsfiddle.net/80hdf5v9/