javascript - 为什么这里没有换行符标签？

Question

我正在使用highlight.js来显示我从pubnub订阅接收到的一些 JSON。它正在为文本着色，但没有按预期添加换行符（通过他们的演示）。此外，文档中的几个地方给人的印象是库生成了新行。请参阅此处useBR的选项。

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

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"
}

小提琴：https ://jsfiddle.net/vgfnod58/

Answer 1

您的代码中没有任何换行符。当 json-string 被格式化时，highlight 函数只会应用格式化选项。你的字符串只有一行。因此，您必须先以正确的格式输入它，然后才能突出显示它：

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

请注意，我将 varm从 string 更改为 object （只需删除 sourrunding '）。

一个工作小提琴：https ://jsfiddle.net/WalterIT/vgfnod58/2/

Answer 2

您应该能够<div>用css white-spaceset to prefor <pre>element 替换 using element

---

编辑，更新

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

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/