前端時間把WordPress使用UEditor編輯器以后，代碼高亮以后不能換行的問題解決了。具體解決辦法可以參考阿湯博客的分享《WordPress中百度編輯器ueditor前臺代碼語言無法自動換行解決辦法》
雖然換行問題解決了，但是行號和代碼沒有對齊，當時沒注意，后面越看越覺得奇怪，手機訪問效果圖如下：
電腦端訪問效果圖如下：
可以發現電腦端訪問的時候，行號“1”和第一行代碼是沒有對齊的，手機端雖然沒有這個問題，但是行號和實際的行是不對應的，看著非常奇怪。
百度和谷歌找了差不多大半天的解決方案，沒一個文檔是完全可以解決這個問題的。
網上的方案總結為兩種：
1、修改shCoreDefault.css的對齊樣式，修改樣式syntaxhighlighter的padding-top的值，讓代碼對齊。
2、通過jQuery遍歷修改CSS樣式，達到自動對齊的目的。
方案一測試了沒效果；方案二測試了也沒效果。
搞了幾個小時以后，都有一種換編輯器的想法了。
但最后令人欣慰的是，功夫不負有心人，終于讓自己給琢磨好了。
下面分享下我的解決方法：
我在測試了各種方案都不成功以后，想著把行號取消算了，這樣看著就不會覺得突兀，但是找了半天，也沒找到解決辦法，就想著把行號隱藏了，于是去改行號的樣式gutter，讓我發現沒對齊的原因是因為樣式中的padding: 9.5px 0 9.5px 9.5px!important 導致，上內邊距9.5px。
.gutter{
color:#afafaf!important;
background-color:#f7f7f9!important;
border-right:1px solid #e1e1e8!important;
padding:9.5px 0 9.5px 9.5px!important;
border-top-left-radius:4px!important;
border-bottom-left-radius:4px!important;
user-select:none!important;
-moz-user-select:none!important;
-webkit-user-select:none!important
}
于是我馬上改成padding: 0 0 9.5px 9.5px!important ，然后清理緩存測試，發現對齊了。如下圖：
為什么手機端一開始首行就沒有錯位，主要就是因為樣式gutter中的padding: 9.5px 0 9.5px 9.5px!important 參數對代碼列<td>也生效了，電腦端為什么沒有對代碼列<td>生效，應該是因為WordPress模板樣式中沖突導致。
到此以為問題得到了解決，但是去訪問手機端，發現行號和實際的行號還是不對應。
然后去找了篇代碼比較多的文章訪問http://m.maowutv.com/atang_4575.html，發現電腦端雖然第一行沒有錯位了，但還是行號和代碼的實際行號不對應。如下圖：
此時我突然發現我在之前的測試過程中發現犯了一個致命錯誤，才導致花了差不多大半天時間都沒解決此問題。
這個致命的錯誤就是：我在測試方案二的時候，把jQuery代碼添加到的文件是電腦端模板，剛好那測試的那篇文章http://m.maowutv.com/atang_3727.html沒有多行代碼換行的情況，所以電腦端看不出效果；而我在通過手機訪問測試的時候忽略了WordPress手機端是插件實現的，插件也有自己的模板，所以當時看著沒效果，就判斷方案二不可行。
發現了錯誤，于是馬上找到插件對應的模板目錄/wp-content/plugins/wptouch/themes/bauhaus/default/，然后把之前找到的jQuery代碼添加到single.php，然后進行測試。
欣喜的發現終于正常了：
電腦端訪問效果：
網上相關的jQuery代碼有三種，經過我測試，如下兩種都生效：
jQuery代碼一：
<script type="text/javascript">
//解決百度編輯器UEditor行號錯位問題
$(function(){
SyntaxHighlighter.highlight();
$("table.syntaxhighlighter").each(function () {
if (!$(this).hasClass("nogutter")) {
var $gutter = $($(this).find(".gutter")[0]);
var $codeLines = $($(this).find(".code .line"));
$gutter.find(".line").each(function (i) {
$(this).height($($codeLines[i]).height());
$($codeLines[i]).height($($codeLines[i]).height());
});
}
});
});
</script>
因為代碼量少阿湯博客也是采用此代碼。
jQuery代碼二：
<script type="text/javascript">
//解決百度編輯器UEditor行號錯位問題
$(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();
});
</script>
我把代碼一添加到手機模板以后，訪問會報錯Uncaught TypeError: $ is not a function 。我網上查了原因是大概是因為與其他庫沖突了。
解決方法是把$(function()改成jQuery(function ($)就可以防止沖突了，改完以后如下：
<script type="text/javascript">
//解決百度編輯器UEditor行號錯位問題
jQuery(function ($){
SyntaxHighlighter.highlight();
$("table.syntaxhighlighter").each(function () {
if (!$(this).hasClass("nogutter")) {
var $gutter = $($(this).find(".gutter")[0]);
var $codeLines = $($(this).find(".code .line"));
$gutter.find(".line").each(function (i) {
$(this).height($($codeLines[i]).height());
$($codeLines[i]).height($($codeLines[i]).height());
});
}
});
});
</script>
我在處理的過程中發現UEditor代碼使用的默認行間距是1.1em，這個間距是比較小的，看著比較緊湊，于是我也改了下間距，主要是修改wp-content/plugins/ueditor/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css文件。
找到文件里面的line-height: 1.1em!important;改成line-height: 2em!important; 就可以了，到此看著就順眼多了。
