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

Question

我正在尝试创建自己的代码片段区域，作者可以在 code block 内编写纯 html，该 block 将自动转换为文本。其工作原理如下所示:

https://jsfiddle.net/mtdrdvaw/2/

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

这可能吗？我怎样才能实现这一目标？

这是我的代码片段标记:

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

这是脚本:

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);
}

编辑:由于我不清楚，我查看了 samp、pre 和 code 但没有他们中的一些人做了我希望他们做的事。我希望该区域使用我自己的填充，并看起来像在作者的代码编辑器中编写的那样。例如，仅使用 pre 会给它一个我不想要的可笑的空白。

Answer 1

您需要使用:

white-space: pre;

片段

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);
}

.code-snippet {
  display: block;
  width: 100%;
  height: 100px;
  padding: 15px;
  border: 2px solid lightgrey;
  background-color: #15181F;
  color: white;
  white-space: pre;
}

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

fiddle :https://jsfiddle.net/cgoe2ptf/