使用Highlight.js維護標記格式

Question

我正在嘗試在我的網頁上顯示動態生成的HTML，並使用highlight.js進行突出顯示/格式設置。我突出顯示正常工作，但縮進不正確。這是jsFiddle。

的代碼這樣表示： <div class="parent">parentContent<div class="child">childContent</div><div class="child">childContent</div><div class="child">childContent</div></div>

，而我想露面，因爲它會在IDE：

<div class="parent"> 
    parentContent 
    <div class="child"> 
     childContent 
    </div> 
    <div class="child"> 
     childContent 
    </div> 
    <div class="child"> 
     childContent 
    </div> 
</div> 

我明白這就是所謂的highlight.js不format.js :)但我認爲這是可能的，我沒有太多的運氣從API得到答案。我曾嘗試通過hljs.configure({ useBR: true });配置換行符，fixMarkup('value')看起來很有希望，但我沒有實現任何成功。

Answer 1

聽我說。我知道這似乎kludgey，但你可以把你的HTML一起作爲一個字符串，像這樣：

for (var i = 0; i < 3; i++){ 
    var html = '<div class="parent">' + 
     '\n\tparentContent'; 

    for (var j = 0; j < 3; j++){ 
     html += '\n\t<div class="child">childContent</div>'; 
    } 

    html += '\n</div>\n' 

    $('.grid-container')[0].innerHTML += html; 
} 

這給你白色空間的全面控制。這也是可能更快，因爲你不是多次追加到DOM，只是一次。當您設置.grid-container的innerHTML時，您只會觸發一次重繪。

的jsfiddle這裏：https://jsfiddle.net/dgrundel/fjLwa592/1/