当前位置:园子博客 » Wordpress » WP-Syntax 代码高亮在IE中显示不正常的解决方案

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

8月 11th, 2010 | Filed under Wordpress | 共有5,623次浏览

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

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

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

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

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

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

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

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

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

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

更改代码高亮的字体显示

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

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

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

将其替换为:

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

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

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

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

  1. 严重浪漫
    10月 13th, 201021:22

    WP-Syntax不用也不行啊,没有更好的了

  2. akasuna.com
    8月 15th, 201014:13

    除非代码比较长,否则不用行号

  3. mice
    8月 13th, 201008:59

    杯具 我用不到的路过…

  4. huangjun
    8月 12th, 201017:16

    代码高亮的方法我一直没用过。

  5. Firm
    8月 12th, 201015:11

    从不用高亮,都是直接搞定

  6. zwwooooo
    8月 12th, 201010:27

    我是直接贴代码

  7. 七七
    8月 11th, 201023:11

    用的机会不多,顶一个

  8. TTkea
    8月 11th, 201023:10

    呵呵,支持折腾~

  9. 软件盒子
    8月 11th, 201021:47

    点下广告吧,呵呵

  10. Junan
    8月 11th, 201021:46

    我还没在文章中插过 代码~

  11. 自由人
    8月 11th, 201020:33

    以前用这个 现在不用插件了

  12. reizhi
    8月 11th, 201020:21

    show代码的文章不多,无视IE了

  13. tal-rasha
    8月 11th, 201017:25

    怎么我在ie8下面看是多出一个空行还没有行号

    • 园子
      8月 11th, 201018:29

      @tal-rasha
      是的哈
      但是代码显示全了
      不影响访客复制代码~

  14. Bee君
    8月 11th, 201015:49

    好像有个更好的代码高亮插件…

    不过~~WP-Syntax也蛮好用~在IE下有点问题,总之好像在不同的浏览器有不同的显示….

  15. 左心房的洞
    8月 11th, 201015:22

    目前发代码较少,直接发了

  16. 保护保护
    8月 11th, 201014:29

    很专业,我小博的ZB应该用不上,顶顶

  17. ifenwen
    8月 11th, 201013:33

    用过这个 不过后来换了 还是SyntaxHighlighter要好用一些
    再者 一般不用插件实现了 直接代码 或者 发芽网 搞定

您必须在 登录 后才能发布评论.