前端时间把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://www.amd5.cn/atang_4575.html，发现电脑端虽然第一行没有错位了，但还是行号和代码的实际行号不对应。如下图：
此时我突然发现我在之前的测试过程中发现犯了一个致命错误，才导致花了差不多大半天时间都没解决此问题。
这个致命的错误就是：我在测试方案二的时候，把jQuery代码添加到的文件是电脑端模板，刚好那测试的那篇文章http://www.amd5.cn/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; 就可以了，到此看着就顺眼多了。
