Me gustaría mostrar un código html que se encuentra dentro de un literal de plantilla dentro de otro literal de plantilla.

Estoy usando etiquetas <pre><code> para intentar esto.

El problema que tengo en este momento es que el navegador muestra el html en lugar de su código. Por ejemplo, muestra un cuadro de entrada real en lugar de mostrar el código, por ejemplo, <input ...

Me gustaría aplicar algún proceso reversible usando javascript a la variable templateliteral para que el html se muestre literalmente (debe mostrar todo el texto naranja sobre negro en el fragmento a continuación), y para que el código original se pueda recuperar fácilmente.

¿Cuál podría ser una buena manera de hacer esto?

Aquí hay un ejemplo del problema (debería mostrar todo el texto en naranja sobre negro):

 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>

Tenga en cuenta que esto está marcado incorrectamente como duplicado, ya que es específico de los literales de plantilla dentro de los literales de plantilla agregados a DOM dentro de las etiquetas de código previo.