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，只需一次。您只需在设置innerHTML的{{1}}时触发重绘一次。

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

使用Highlight.js维护标记格式

1 个答案: