在 SyntaxHighlighter 中启用换行符而不中断行号 [重复]答案

【问题标题】：enable linebreaks in SyntaxHighlighter without breaking line numbers [duplicate]在 SyntaxHighlighter 中启用换行符而不中断行号 [重复]
【发布时间】：2012-10-13 18:05:52
【问题描述】：

SyntaxHighlighter 显示没有换行符的行。长行显示在一行中，并在容器中添加了一个水平滚动条。

我不想要那个滚动条，我可以通过一些强制但简单的 CSS 规则在 SyntaxHighlighter 中强制换行。

问题是内容和行号没有显示在同一个容器中，因此如果行以这种方式拆分，行号将与正确的行不匹配。

有没有机会让它工作而不会有太多麻烦？欢迎任何想法..！

【问题讨论】：

标签： javascript css line-breaks syntaxhighlighter

【解决方案1】：

这就是我最终做到的方式：

    // 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 完成。

【讨论】：