長代碼換行是SyntaxHighlighter3.0版本之前的功能，但3.0之后就木了，草草草草艸！本人認為主要猿因是gutter（代碼行號指示器）的換行難做。因為3.x版是將代碼行號和代碼部分分開生成HTML的，猿來的老版本是在一起的。這樣做是便于直接復制代碼，而不會復制到行號上去。

很多人都在想辦法讓它實現換行，但都卡在代碼行號的問題上。我關注這個問題已經差不多一年了，今天終于有了個比較漂亮的解決辦法。

首先，強制給代碼部分換行的CSS還是要寫的：

.syntaxhighlighter textarea { 后加入

white-space: pre-wrap !important;word-break: break-all;/* 如果是需要保留一行內的單詞完整性則需要把 break-all 改為 break-word  */

這段CSS換行的前提是，pre標簽的外邊一定要有一個固定寬度的容器對象。比如一個600px寬度的div就可以。

然后，我們需要一段JQuery，用來計算被換行的代碼顯示在頁面上的高度，然后賦值給它的行標。這段代碼是國外一個論壇上找的，但我測試的時候發現它有點小問題，我的環境是JQuery1.7+Firefox15，我順便做了一個修正，全部代碼如下：

$(function() {// Line wrap backvar shLineWrap = function() {$('.syntaxhighlighter').each(function() {// Fetchvar $sh = $(this),$gutter = $sh.find('td.gutter'),$code = $sh.find('td.code');// Cycle through lines$gutter.children('.line').each(function(i) {// Fetchvar $gutterLine = $(this),$codeLine = $code.find('.line:nth-child(' + (i + 1) + ')');//alert($gutterLine);// Fetch heightvar height = $codeLine.height() || 0;if (!height) {height = 'auto';} else {height = height += 'px';//alert(height);}// Copy height over$gutterLine.attr('style', 'height: ' + height + ' !important'); // fix by Edi, for JQuery 1.7+ under Firefox 15.0console.debug($gutterLine.height(), height, $gutterLine.text(), $codeLine);});});};// Line wrap back when syntax highlighter has done it's stuffvar shLineWrapWhenReady = function() {if ($('.syntaxhighlighter').length === 0) {setTimeout(shLineWrapWhenReady, 10);} else {shLineWrap();}};  // FireshLineWrapWhenReady();});

現在，行號的高度就能和代碼的高度保持一致了。

如果在CHROME和火狐瀏覽器下出現首行錯位問題，解決辦法如下：根本原因是與主CSS樣式的.container樣式沖突，如下位置是bootstrap的定義：

.clearfix::before, ...,.container::before, .container::after, ..., .modal-footer::before, .modal-footer::after {    content: " ";    display: table;}

 就是這個display: table;屬性導致的，重寫一個 syntaxhighlighter的container樣式覆蓋它就行了：

 .syntaxhighlighter td.code .container::before, .syntaxhighlighter td.code .container::after {display: none;}