使用JavaScript保留代码段区域中的格式

我正在尝试创建自己的代码片段区域，在该区域中，作者可以在

code

块中编写纯html，该块将自动转换为文本。其工作原理如下所示：

但是，一旦将元素转换为文本，元素的换行符就不会持续存在。 我希望格式在HTML到文本转换后保持不变

这有可能吗？我怎样才能做到

这是我的代码段标记：

<code class="code-snippet">
  <div class="item">test</div>
  <div class="item">test1</div>
  <div class="item">test2</div>
</code>

测试
测试1
测试2

下面是脚本：

var codeSnippets = document.getElementsByClassName('code-snippet'),
    length = codeSnippets.length,
    i;

for (i = 0; i < length; i++) {

  var code = codeSnippets[i].innerHTML,
      node = document.createTextNode(code);

  codeSnippets[i].innerHTML = '';
  codeSnippets[i].appendChild(node);
}

var codeSnippets=document.getElementsByClassName（'code-snippet'），
length=codeSnippets.length，
我
对于（i=0；i

编辑：因为我不清楚，所以我查看了

samp

、

pre

和

code

，但他们都没有做我希望他们做的事。我希望该区域使用我自己的填充，并按照作者在代码编辑器中编写的方式进行查看。例如，仅使用

pre

会给它一个我不想要的荒谬的空白。

您需要使用：

white-space: pre;

片段

var codeSnippets=document.getElementsByClassName（'code-snippet'），
length=codeSnippets.length，
我
对于（i=0；i

。代码片段{
显示：块；
宽度：100%；
高度：100px；
填充：15px；
边框：2件纯色浅灰色；
背景色：#15181F；
颜色：白色；
空白：预处理；
}

测试
测试1
测试2

@Oka我不明白否决票，也不明白你的意思。我看了很多选项，但没有一个是我想要的，因为格式不是我想要的。这正是我想要的，但是有没有办法消除出现的荒谬的间距？我希望它只使用我自己的填充。@Chrillewoodz顶部有一个换行符，左侧有空格。请使用

trim（）

将其删除。尝试过之后，问题是无法删除元素之间的换行符。如果我删除它们，它将不再断行，如果有缩进的话，也不会有缩进。不确定这是否可行，您认为如何？不适用于缩进，但它可以，因为我找到了一个解决方法。是的，这就是我的回答。