为什么这个 <pre> 标签中没有换行符？

Question

我正在使用 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。

这是我当前的代码（我尝试了一些不同的东西）：

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

下面是 DOM 的样子：

但这是输出：

如何获取换行符？我希望它看起来像这样：

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

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

Answer 1

您应该可以使用 <div> 元素替换为 css white-space 设置为 pre 的 <pre> 元素

编辑、更新

在突出显示的 <span> 元素前后插入不间断 space 和换行符的替代方法

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&nbsp;&nbsp;");
if (i === $('#codehere span').length -1)
  $(this).after("\n")
});

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

Answer 2

您的代码中没有任何换行符。当格式化 json 字符串时，突出显示功能将仅应用格式化选项。您的字符串只是一行。因此，您必须先以正确的格式导入它，然后才能突出显示它：

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);

请注意，我将 var m 从字符串更改为对象（只需删除 sourrunding '）。

工作 fiddle：https://jsfiddle.net/WalterIT/vgfnod58/2/

为什么这个 <pre> 标签中没有换行符？

Why aren't there line breaks in this <pre> tag?

javascript

jquery

json

pubnub

highlightjs