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

听我说完。我知道这可能看起来很笨拙，但您可以将您的 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/