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

【问题标题】：Why aren't there line breaks in this <pre> tag?为什么这个 <pre> 标签中没有换行符？
【发布时间】：2016-08-31 16:47:08
【问题描述】：

我正在使用highlight.js 来显示我从pubnub 订阅收到的一些JSON。它正在为文本着色，但没有按预期添加换行符（通过their demos）。此外，文档中的几个地方给人的印象是库生成了新行。请参阅useBR 选项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"
}

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

【问题讨论】：

spans 默认情况下是内联元素。如果你想要换行符，你需要通过添加
或使用块级元素来添加它们。
可以创建stacksn-ps或者jsfiddle来演示吗？
可能 highlight.js 不负责添加换行符（只是语法突出显示）并且 pubnub 不返回带有换行符的 json。您可能必须自己解析并添加换行符。
@Andrew 想法不错，但 API 中的一些引用让我相信情况并非如此：highlightjs.readthedocs.io/en/latest/api.html#fixmarkup-value
是的，但它只会替换原始 json 字符串中的制表符。一会儿看看我的回答

标签： pubnub javascript jquery json pubnub highlightjs

【解决方案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);

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

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

【讨论】：

我对其进行了简化并将var hlt = ... 替换为var hlt = hljs.highlight('json',JSON.stringify($.parseJSON(m), null, 4));，它似乎在我的代码中运行良好。
很高兴听到。当你经常使用它时，你应该为它做一个函数;-)

【解决方案2】：

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

编辑、更新

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

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

【讨论】：

@Scott "这不起作用。" 你能创建一个 stacksn-p 或 jsfiddle jsfiddle.net 来演示吗？请注意，在 highlight.js 文档的演示中，<pre> 元素将 <code> 元素作为第一个子元素 highlightjs.org/usage