前端時(shí)間把WordPress使用UEditor編輯器以后，代碼高亮以后不能換行的問題解決了。具體解決辦法可以參考阿湯博客的分享《WordPress中百度編輯器ueditor前臺(tái)代碼語言無法自動(dòng)換行解決辦法》
雖然換行問題解決了，但是行號(hào)和代碼沒有對齊，當(dāng)時(shí)沒注意，后面越看越覺得奇怪，手機(jī)訪問效果圖如下：
電腦端訪問效果圖如下：
可以發(fā)現(xiàn)電腦端訪問的時(shí)候，行號(hào)“1”和第一行代碼是沒有對齊的，手機(jī)端雖然沒有這個(gè)問題，但是行號(hào)和實(shí)際的行是不對應(yīng)的，看著非常奇怪。
百度和谷歌找了差不多大半天的解決方案，沒一個(gè)文檔是完全可以解決這個(gè)問題的。
網(wǎng)上的方案總結(jié)為兩種：
1、修改shCoreDefault.css的對齊樣式，修改樣式syntaxhighlighter的padding-top的值，讓代碼對齊。
2、通過jQuery遍歷修改CSS樣式，達(dá)到自動(dòng)對齊的目的。
方案一測試了沒效果；方案二測試了也沒效果。
搞了幾個(gè)小時(shí)以后，都有一種換編輯器的想法了。
但最后令人欣慰的是，功夫不負(fù)有心人，終于讓自己給琢磨好了。
下面分享下我的解決方法：
我在測試了各種方案都不成功以后，想著把行號(hào)取消算了，這樣看著就不會(huì)覺得突兀，但是找了半天，也沒找到解決辦法，就想著把行號(hào)隱藏了，于是去改行號(hào)的樣式gutter，讓我發(fā)現(xiàn)沒對齊的原因是因?yàn)闃邮街械膒adding: 9.5px 0 9.5px 9.5px!important 導(dǎo)致，上內(nèi)邊距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 ，然后清理緩存測試，發(fā)現(xiàn)對齊了。如下圖：
為什么手機(jī)端一開始首行就沒有錯(cuò)位，主要就是因?yàn)闃邮絞utter中的padding: 9.5px 0 9.5px 9.5px!important 參數(shù)對代碼列<td>也生效了，電腦端為什么沒有對代碼列<td>生效，應(yīng)該是因?yàn)閃ordPress模板樣式中沖突導(dǎo)致。
到此以為問題得到了解決，但是去訪問手機(jī)端，發(fā)現(xiàn)行號(hào)和實(shí)際的行號(hào)還是不對應(yīng)。
然后去找了篇代碼比較多的文章訪問http://www.zhongjima.net/atang_4575.html，發(fā)現(xiàn)電腦端雖然第一行沒有錯(cuò)位了，但還是行號(hào)和代碼的實(shí)際行號(hào)不對應(yīng)。如下圖：
此時(shí)我突然發(fā)現(xiàn)我在之前的測試過程中發(fā)現(xiàn)犯了一個(gè)致命錯(cuò)誤，才導(dǎo)致花了差不多大半天時(shí)間都沒解決此問題。
這個(gè)致命的錯(cuò)誤就是：我在測試方案二的時(shí)候，把jQuery代碼添加到的文件是電腦端模板，剛好那測試的那篇文章http://www.zhongjima.net/atang_3727.html沒有多行代碼換行的情況，所以電腦端看不出效果；而我在通過手機(jī)訪問測試的時(shí)候忽略了WordPress手機(jī)端是插件實(shí)現(xiàn)的，插件也有自己的模板，所以當(dāng)時(shí)看著沒效果，就判斷方案二不可行。
發(fā)現(xiàn)了錯(cuò)誤，于是馬上找到插件對應(yīng)的模板目錄/wp-content/plugins/wptouch/themes/bauhaus/default/，然后把之前找到的jQuery代碼添加到single.php，然后進(jìn)行測試。
欣喜的發(fā)現(xiàn)終于正常了：
電腦端訪問效果：
網(wǎng)上相關(guān)的jQuery代碼有三種，經(jīng)過我測試，如下兩種都生效：
jQuery代碼一：
<script type="text/javascript">
//解決百度編輯器UEditor行號(hào)錯(cuò)位問題
$(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>
因?yàn)榇a量少阿湯博客也是采用此代碼。
jQuery代碼二：
<script type="text/javascript">
//解決百度編輯器UEditor行號(hào)錯(cuò)位問題
$(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>
我把代碼一添加到手機(jī)模板以后，訪問會(huì)報(bào)錯(cuò)Uncaught TypeError: $ is not a function 。我網(wǎng)上查了原因是大概是因?yàn)榕c其他庫沖突了。
解決方法是把$(function()改成jQuery(function ($)就可以防止沖突了，改完以后如下：
<script type="text/javascript">
//解決百度編輯器UEditor行號(hào)錯(cuò)位問題
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>
我在處理的過程中發(fā)現(xiàn)UEditor代碼使用的默認(rèn)行間距是1.1em，這個(gè)間距是比較小的，看著比較緊湊，于是我也改了下間距，主要是修改wp-content/plugins/ueditor/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css文件。
找到文件里面的line-height: 1.1em!important;改成line-height: 2em!important; 就可以了，到此看著就順眼多了。
