Is it possible to insert code block from a javascript function?

Question

For example given something like this

const stuff = [{"a": "b"}]
const inhtml = document.querySelector(".exists")
const pre = document.createElement("pre")
pre.appendChild(document.createTextNode(stuff))
inhtml.appendChild(pre)

I want it to output the array [{"a": "b"}] in a code block dynamically

Except it just outputs [Object object ...]

You can use JSON.stringify(obj) to help convert an object into a string. — PotatoParser, Aug 20 '20 at 22:29
oh that works! Is there a way to format it properly as well @PotatoParser — name, Aug 20 '20 at 22:31
Yes! You can do JSON.stringify(obj, null, '\t') which will automatically tab key/values on the inside! — PotatoParser, Aug 20 '20 at 22:34

Brian Lee · Accepted Answer · 2020-08-20T22:50:45.787

0

You can use JSON.stringify() to display the text:

const stuff = [{"a": "b"}];
const inhtml = document.querySelector("div#main");
const pre = document.createElement("pre");
const code = document.createElement("code");

code.innerHTML = JSON.stringify(stuff, null, '\t');
code.style.backgroundColor = '#ebccca';

pre.appendChild(code);

inhtml.appendChild(pre);

<p>Code goes below here</p>

<div id="main"></div>

edited Aug 20 '20 at 22:50

answered Aug 20 '20 at 22:31

Brian Lee

17,904
3
41
52

Hi, that worked. Is there a way to format it also – name Aug 20 '20 at 22:32
You can format the output using CSS. – Brian Lee Aug 20 '20 at 22:33
@shah I've updated the answer. – Brian Lee Aug 20 '20 at 22:42
Oh, so there is no way to color code basic javascript color in the code block without css? – name Aug 20 '20 at 22:46
You can use javascript to set the style attributes. I've changed the answer to show how. – Brian Lee Aug 20 '20 at 22:51

Is it possible to insert code block from a javascript function?

1 Answers1