Почему в этом теге <pre> нет разрывов строк?

Question

Я использую https://highlightjs.org/ для отображения некоторого JSON, который я получаю из подписки на pubnub. Он раскрашивает текст, но не добавляет разрывов строк, как ожидалось (через их демонстрации). Кроме того, пара мест в документации создает впечатление, что библиотека генерирует новые строки. Увидеть 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-строки. Ваша строка - это только одна строка. Итак, вам придется сначала привести его в правильном формате, а затем выделить его:

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

Пожалуйста, имейте в виду, что я изменил вар m от строки к объекту (просто уберите sourrunding ').

Работающая скрипка: https://jsfiddle.net/WalterIT/vgfnod58/2/

Answer 2

Вы должны быть в состоянии заменить, используя <div> элемент с csswhite-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  ");
if (i === $('#codehere span').length -1)
  $(this).after("\n")
});

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