Question

我正在尝试创建自己的代码片段区域，作者可以在code块内编写纯html，该块将自动转换为文本。这可以在这里演示：

但是，一旦将元素转换为文本，元素的换行就不会持久。我想在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;

<强>段

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

小提琴：https://jsfiddle.net/cgoe2ptf/

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

1 个答案: