为什么这个<pre> tag?

Question

I'm using highlight.js to display some JSON I'm receiving from a pubnub subscription. It is coloring the text but it is not adding line breaks as expected (via their demos). Also, a couple places in the documentation give the impression that the library generates new lines. See the useBR option here.

Here is my current code (I've tried a few different things):

pubnub.subscribe({
    channel : 'TEST',
    message : function(m){
        console.log(m);
        var hlt = hljs.highlight('json',m);
        $('#jsonOutput').html("<pre>" + hlt.value + "</pre>");
    }
});

And here is what the DOM looks like:

But here is the output:

How can I get line breaks? I want it to look similar to this:

{
    "id":"TESTWIDGET1",
    "value":371,
    "timestamp":"2016-08-31T11:39:57.8733485-05:00"
}

fiddle: https://jsfiddle.net/vgfnod58/

Answer 1

You don't have any line-breaks in your code. The highlight function will only apply the formatting options, when the json-string was formatted. You string is only one single line. So, you will have to bring it in the right format first and then you can highlight it:

function print_r(object,html){
    if(html) return '<pre>' +  JSON.stringify(object, null, 4) + '</pre>';
    else return JSON.stringify(object, null, 4);
}  

var m = {"id":"TESTWIDGET1","value":351,"timestamp":"2016-08-31T12:03:24.3403952-05:00"};
var hlt = hljs.highlight('json',print_r(m));
$('#codehere').html(hlt.value);

Please be aware that I changed the var m from string to object (just remove the sourrunding ').

A working fiddle: https://jsfiddle.net/WalterIT/vgfnod58/2/

Answer 2

You should be able to substitute using <div> element with css white-space set to pre for <pre> element

---

Edit, Updated

Alternative approach inserting non-breaking space and newline characters before and after highlighted <span> elements

var m = '{"id":"TESTWIDGET1","value":351,"timestamp":"2016-08-31T12:03:24.3403952-05:00"}';
// hljs.configure({useBR: true});
var hlt = hljs.highlight('json',m);
$('#codehere').html(hlt.value)
$('#codehere span').each(function(i) {
if (i % 2 === 0)
  $(this).before("\n  ");
if (i === $('#codehere span').length -1)
  $(this).after("\n")
});

jsfiddle https://jsfiddle.net/vgfnod58/3/