javascript - 在 SyntaxHighlighter 中启用换行符而不中断行号

Question

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

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

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

有没有机会让它在没有太多麻烦的情况下工作？欢迎任何想法..！

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