使用JavaScript在代碼片段區域中保留格式

Question

我想創建自己的代碼片段區域，作者可以在code塊內編寫純html，該塊將自動轉換爲文本。這個工程是這裏演示：

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>

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