WP-Syntax 代码高亮在IE中显示不正常的解决方案

WP-Syntax 是一款非常好用的代码高亮插件,经常在博文中贴代码的朋友肯定非常熟悉。经过博友 @Aerofish 的提醒,园子发现在所有的IE浏览器代码高亮的地方都会有个问题,那就是加了行号显示的代码,如果本来是四行的话,在IE浏览器下只会显示三行,但选中复制的话是可以复制到第四行的代码的。

如果你的代码只有一行,那么在IE中很可能这一行整行都不会显示,同样双击的话也可以复制出来代码。这种问题只有在IE浏览器中出现,你可以看看下图代码高亮更改前的显示:

代码高亮显示更改前后的效果对比

代码高亮显示更改前后的效果对比

代码高亮在 IE 中显示不正常的解决方案

我们可以看到更改前第四行代码只显示出了一部分,园子在网上也没有翻出更好的解决方案,只有动动 CSS 了。

在你主题的 CSS 文件中添加如下代码:

.content .wp_syntax {padding:0 0 16px;}

这样的话就会把第四行代码给完整的显示出来了,但有部分代码会出现16px的下边界填充,你可以参考上图对比一下看看。

目前没有找到更好的解决方案,虽然通过 CSS Hack 可以纠正过来,但园子认为这并不是最完美的解决方案,所以放弃了用 Hack 去修正,个人认为这样也不是很影响美观,也就保持这样原生态的了。

更改代码高亮的字体显示

发现默认显示的代码字体不是很好看,于是把代码高亮默认的字体给改了下,方法如下:

打开插件目录下“wp-syntax/geshi/geshi.php”文件,搜索如下代码:

var $overall_style = 'font-family:monospace;';

将其替换为:

var $overall_style = 'font-family:Microsoft YaHei,Arial;';

具体效果可以看看本篇文章中的代码字体显示,是不是比默认的要漂亮些呢?

如果你不太会使用 WP-Syntax 插件,建议你看看:wp-Syntax 插件使用方法

最后,关于 WP-Syntax 代码高亮插件在IE中显示不正常这个问题,园子提供的或许不是最好的解决方案,如果哪位朋友有更好的方法,欢迎在评论中提出,我会继续尝试优化。

WP-Syntax 代码高亮在IE中显示不正常的解决方案》上有18条评论

发表评论