用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(“值”)看起来很有希望，但我没有成功地实现它。

Answer 1

听我说完。我知道这听起来很不可思议，但您可以将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，只有一次。您只在设置innerHTML of .grid-container时触发一次重绘。

JSFiddle这里：https://jsfiddle.net/dgrundel/fjLwa592/1/