为 SyntaxHighlighter 插件添加自动换行功能

在 Wordpress 的众多插件中，SyntaxHighlighter 算是一个比较出名的了，这个插件可以让你的 Wordpress 文章中对各种代码进行语法着色。

在 v2.x 的版本中，是可以支持自动换行的，但是复制的时候却包括了行号。在 v3.x 版本中改善了复制功能，但是取消了自动换行的功能，本文就将使用 jQuery 库为 SyntaxHighlighter 的 v3.x 版本添加自动换行功能。

在网上其他的一些文章中，只添加了自动换行的代码却没有修正强制换行后行号显示不正确的问题。而按照以下方法，可以避免这个 bug 的出现，得到完美的自动换行功能。

这是 v2.x 版本的 demo，可以看到虽然是有自动换行的功能，但是鼠标选择的时候包括了左边的行号，对于 copy 代码的时候是极不方便的 = =

这是 v3.x 版本的 demo，可以知道虽然优化了界面和选择的范围，但是默认情况下是不能自动换行的，而那一道拖动条不仅难看，而且难看 =_=#

好吧，so 怎么做到既保持美观又能自动换行呢。机制的博主在翻遍许多网页、尝试了各种方法之后终于找到了实现的步骤。

嗯以下方法虽然是只支持 SyntaxHighlighter 默认的颜色主题，但是通过适当的修改其他主题也是适合的。先放一张修改之后的完美换行图片吧。

---

这里是方法：

1. 在 < span style=“color:#0000FF;”>wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shCore.css 中的 < span style=“color:#000099;”>.syntaxhighlighter textarea { 后加入

   white-space: pre-wrap !important;
   word-break: break-all;
   /* 如果是需要保留一行内的单词完整性则需要把 break-all 改为 break-word  */

2. 在 < span style=“color:#0000FF;”>wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shCore.js 中的 < span style=“color:#000099;”>*/ 后加入

   $(function () {
   // Line wrap back
   var shLineWrap = function () {
       $('.syntaxhighlighter').each(function () {
           // Fetch
           var $sh = $(this),
               $gutter = $sh.find('td.gutter'),
               $code = $sh.find('td.code')
               ;
           // Cycle through lines
           $gutter.children('.line').each(function (i) {
               // Fetch
               var $gutterLine = $(this),
                   $codeLine = $code.find('.line:nth-child(' + (i + 1) + ')')
                   ;
               //alert($gutterLine);
               // Fetch height
               var 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.0
               console.debug($gutterLine.height(), height, $gutterLine.text(), $codeLine);
           });
       });
   };
   // Line wrap back when syntax highlighter has done it's stuff
   var shLineWrapWhenReady = function () {
       if ($('.syntaxhighlighter').length === 0) {
           setTimeout(shLineWrapWhenReady, 10);
       }
       else {
           shLineWrap();
       }
   };
   // Fire
   shLineWrapWhenReady();
   });