javascript - 显示来自 html 前代码标记中另一个模板文字中的模板文字的 html

Question

我想在另一个模板文字中显示一些模板文字中的 html 代码。

我正在使用<pre><code>标签来尝试这个。

我目前遇到的问题是浏览器呈现的是 html 而不是它的代码。例如，它显示一个实际的输入框来代替显示代码，例如<input ...

我想使用 javascript 对templateliteral变量应用一些可逆过程，以便按字面显示 html（在下面的代码段中，它应该在黑色文本上显示所有橙色），以便可以轻松取回原始代码。

有什么好方法可以做到这一点？

这是问题的一个示例（它应该在黑色文本上显示所有橙色）：

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>

请注意，这被错误地标记为重复，因为它特定于在 pre 代码标记中添加到 DOM 的模板文字中的模板文字。

标签： javascripthtmlcsstemplate-literals