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