使用 Highlight.js 维护标记格式

Question

我正在尝试在我的网页上显示动态生成的 HTML 并使用 highlight.js 执行 highlighting/formatting。我的突出显示工作正常，但缩进不正确。这是 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. I have tried configuring line breaks via hljs.configure({ useBR: true }); and the 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;
}

这让您可以完全控制白色 space。它也 可能更快 因为你没有附加到 DOM 几次，只是一次。设置 .grid-container 的 innerHTML 时只会触发一次重绘。

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

使用 Highlight.js 维护标记格式

Maintain Markup Format with Highlight.js

javascript

jquery

highlight.js