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