使用Highlight.js维护标记格式

I am attempting to display dynamically generated HTML on my web page and do highlighting/formatting using highlight.js. I have the highlighting working correctly, however the indentation is not correct. Here's the jsFiddle.

我试图在我的网页上显示动态生成的HTML,并使用highlight.js进行突出显示/格式化。我突出显示正常工作,但缩进不正确。这是jsFiddle。

The code shows like this: <div class="parent">parentContent<div class="child">childContent</div><div class="child">childContent</div><div class="child">childContent</div></div>

代码显示如下:

parentContent

childContent

whereas I'd like to show up as it would in an IDE:

而我想像在IDE中那样出现:

<div class="parent">
    parentContent
   <div class="child">
       childContent
   </div>
   <div class="child">
       childContent
   </div>
   <div class="child">
       childContent
   </div>
</div>

I understand it's called highlight.js not format.js :) but I thought it was possible and I haven't had much luck getting an answer from the API. I have tried configuring line breaks via hljs.configure({ useBR: true }); and the fixMarkup('value') looked promising but I have not implemented it with any success.

我理解它叫做highlight.js而不是format.js :)但我认为这是可能的,而且我没有太多运气从API获得答案。我试过通过hljs.configure({useBR:true})配置换行符;而fixMarkup('value')看起来很有希望,但我没有成功实现它。

1 个解决方案

#1

Hear me out. I know this might seem kludgey, but you can put your html together as a string, like so:

听我说。我知道这可能看起来像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;
}

This gives you full control of the white space. It's also probably faster because you're not appending to the DOM several times, just once. You only trigger a redraw one time when you set the innerHTML of .grid-container.

这使您可以完全控制空白区域。它也可能更快,因为你没有多次附加到DOM,只有一次。设置.grid-container的innerHTML时,只触发一次重绘。

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

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

#1