включить разрывы строк в SyntaxHighlighter без разрыва номеров строк [дубликаты]

SyntaxHighlighter отображает строки без разрывов строк. Длинные строки отображаются в одну строку, а в контейнер добавляется горизонтальная полоса прокрутки.

Мне не нужна эта полоса прокрутки, и я могу заставить разрывы строк в SyntaxHighlighter с помощью некоторых обязательных, но простых правил CSS.

Проблема в том, что содержимое и номера строк не отображаются в одном и том же контейнере, поэтому номера строк не будут соответствовать правильным строкам, если строки разделены таким образом.

Есть ли шанс заставить его работать без особых проблем? Приветствуются любые идеи..!


javascript css line-breaks syntaxhighlighter
person lrsjng    schedule 13.10.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вот как я наконец сделал это:

    // return a jQuery object listing all highlighted lines as divs
            // sh: SyntaxHighlighter
            // alias: brush alias
            // content: the code to highlight
    getHighlightedLines = function (sh, alias, content) {

        var brushes = sh.vars.discoveredBrushes,
            Brush, brush;

        if (!brushes) {
            brushes = {};

            _.each(sh.brushes, function (info, brush) {

                var aliases = info.aliases;

                if (aliases) {
                    info.brushName = brush.toLowerCase();

                    for (var i = 0; i < aliases.length; i += 1) {
                        brushes[aliases[i]] = brush;
                    }
                }
            });

            sh.vars.discoveredBrushes = brushes;
        }

        Brush = sh.brushes[brushes[alias || 'plain']];

        if (!Brush) {
            return $();
        }

        brush = new Brush();
        brush.init({toolbar: false, gutter: false});

        return $(brush.getHtml(content)).find('.line');
    },

используйте это так:

var $table = $('<table/>');

getHighlightedLines(sh, settings.types[current.type], content).each(function (i) {
    $('<tr/>')
        .append($('<td/>').addClass('nr').append(i + 1))
        .append($('<td/>').addClass('line').append(this))
        .appendTo($table);
});

теперь у вас есть номера строк и содержимое строк в одной строке, даже если код переносится. Все остальное можно сделать с помощью CSS.

person lrsjng    schedule 24.10.2012