使用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/