I'd like to display some html code that is within a template literals within another template literal.

I am using <pre><code> tags to attempt this.

The problem I'm having at the moment is that the browser renders the html rather than its code. For example it displays an actual input box in place of displaying the code, e.g. <input ...

I'd like to apply some reversible process using javascript to the templateliteral variable so that the html is displayed literally (it should display all orange on black text in the below snippet), and so that the original code can be easily got back.

What might be a good way to do this?

Here is an example of the problem (it should display all orange on black text):

let templateliteral = `let inner = { content : \`
<style>
#exampleDivInTemplateLiteral { background-color:lightblue;color:white; }
</style>

<div id="exampleDivInTemplateLiteral">
    <b>this is some text.</b>
    <input id="exampleInput" placeholder="example input">\</input>
</div>\`}`


document.getElementById("exampleDiv").innerHTML = '<pre><code>' + templateliteral + '<pre></code>'

<div id="exampleDiv" style="background-color:black;color:orange;">

<div>

Note this is incorrectly marked as duplicate as it is specific to template literals within template literals added to DOM within pre code tags.