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

在不破坏行号的情况下在SyntaxHighlighter中启用换行符

1 个答案: