enable linebreaks in SyntaxHighlighter without breaking line numbers [duplicate]

Question

This question already has answers here:

Automatic line break in js SyntaxHighlighter (2 answers)

Closed 8 years ago.

SyntaxHighlighter displays lines without linebreaks. Long lines are display in one line and a horizontal scrollbar is added to the container.

I don't want that scrollbar and I'm able to force line breaks in SyntaxHighlighter with some enforcing but simple CSS rules.

The problem is that content and line numbers are not displayed in the same container and therefor the line numbers won't match the right lines if lines get split that way.

Is there any chance to get it working without to much trouble? Any ideas welcome..!

Answer 1

This is the way I finally did it:

    // 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');
    },

use it like this:

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

now you have line numbers and line content on the same row, even if code gets wrapped. Anything else can be done with CSS.