当前位置: 首页 > 设计 > 正文
avatar

WordPress代码高亮插件SyntaxHighlighter Evolved在手动复制局部代码的时候,会将行号也复制进去,这样就影响了手动复制代码的效果,于是威言威语就想到了一个比较投机的方法来解决这一问题。

WordPress功能强大这点是毋庸置疑的,但是有一点不好的地方就是在文章中发布代码。

因为经常在文章中写些代码,如何能够很好的展示代码我想是很多人都需要的。纵观WordPress的代码插件,基本我都试用过了,说实话,没有满意的。

要么是代码展示的样式不好,要么加载一些JS库来实现高亮而使得速度很慢很慢。我想找个简单的能够很好的展示代码就行了,至于看上去有没有高亮都无所谓了,希望大家能推荐推荐。

暂时我用的代码插件是SyntaxHighlighter Evolved,因为从PJBlog转过来后,一些文章中的发布的代码就变乱了,转过来的时候基本都是【code]【/code]。而这个插件正好也能使用的这样的标签来显示代码,而且基本比较满意,虽然加载还是慢了一些。

当然SyntaxHighlighter Evolved除了速度慢一点外,还有一点,就是手动复制代码的时候会连行号也一起复制走了,这点很讨厌。

最新版的SyntaxHighlighter Evolved可以使用3.X版的Syntax Highlighter,但是这个版本更加糟糕,虽然行号不被复制走了。代码不能自动换行,而是在下面出了滚动条;而且也没有了使用2.X版的Syntax Highlighter的小工具条,个人感觉样式也没有之前的好看。

于是我就在两者之间徘徊,希望能找到一个完美的解决方案,如果在2.X下手动复制的时候不复制行号。这样应该说就完美了很多,因为有时候我只要复制其中的一段代码而不是全部,带行号确实比较讨厌。

想的方法就是怎么样在复制的时候禁止复制行号,这是个比较无奈的问题,基本都是全文不让复制,而这种局部性的没有发现很好的,我很纠结。

他这个代码展示是一行一行的表格组合而成,于是想到一个比较投机的方法,用文本框把那些数字套起来了,然后文本框设置成只读无效,这样选择时其实只选到文本框,而选不到里面的数字,从而解决复制的时候把行号也复制进去的情况。

先看一个小小例子。

1、我是个正常文本框
<input type="text" value="01" />

2、我是个只读文本框
<input readonly="readonly" type="text" value="01" />

3、我是个无效文本框
<input disabled="disabled" type="text" value="01" />

这样我们就发现,使用正常文本框,上面的01可以修改删除;使用只读文本框,上面的01可以复制但不可以更改;使用无效文本框,上面的01是无法复制的,这样第三种就能很好的解决我们的问题。

稍稍改动了下插件其中的JS代码,就实现了我想要的效果。

其中效果最好是FireFox,手动复制的时候完全碰不到行号。而IE,Chrom,Opera,Safari等浏览器则在复制的时候行号也像是被复制的样子,当然是粘贴的是不会粘贴出行号来的,但是这样容易有误解,以为将行号也复制进去了,不过这个就真的改不起来了。

我还在期待完美的代码插件出现。

本文固定链接: http://www.weisay.com/blog/wordpress-syntaxhighlighter-evolved-line-number.html | 威言威语

WordPress代码高亮插件SyntaxHighlighter Evolved的行号问题:目前有43 条评论

  1. avatar
    24楼
    精剪 Google Chrome Windows

    怎样才能运行代码?也就是在添加一个代码框,在框的下面有运行按钮。

    2013-06-26 19:31 [回复]
  2. avatar
    23楼
    Google Chrome Windows

    试过好几个多不理想就撤掉了! :oops:

    2013-04-11 09:40 [回复]
  3. avatar
    22楼
    小波 Maxthon Windows

    苦于找代码插件,之前按了好几个都不好用

    2012-04-22 23:32 [回复]
  4. avatar
    21楼
    wordpress插件 360安全浏览器 Windows

    同样在找完美的代码高亮显示插件。

    2012-03-26 21:38 [回复]
  5. avatar
    20楼
    赤霄 Mozilla Firefox Windows

    感谢,修改的js太好了

    2012-01-13 12:03 [回复]
  6. avatar
    19楼
    mspring Google Chrome Windows

    网站又换主题了呀。

    2011-10-08 10:26 [回复]
  7. avatar
    18楼
    Pablo Google Chrome Windows

    能共享下你如何修改的JS吗?

    2011-06-08 22:14 [回复]
  8. avatar
    17楼
    bjmayor Mozilla Firefox Windows

    哎.我现在用的插件就是用js做的高亮,好处是不用插件了也不至于乱,编辑很干净.坏处就是页面加载速度很慢.而且也是会复制到行号.
    网上看到个介绍用CodeRender生成高亮代码.似乎还不错.

    2011-03-14 21:56 [回复]
    • avatar
      William Internet Explorer Windows

      WordPress的代码插件我至今没有发现一个很好的,都是比较笨重的那种,加载了很多的JS。

      2011-03-15 22:35 [回复]
  9. avatar
    16楼
    冰棱 Internet Explorer Windows

    威哥 我的不行啊 用一样的主题,直接不在一行上..

    2011-02-11 23:30 [回复]
    • avatar
      William Internet Explorer Windows

      不会呀应该能正常使用的,我就修改了去掉复制行号了,其他的都没有动

      2011-03-15 22:33 [回复]
  10. avatar
    15楼
    xmwusx.cn Internet Explorer Windows

    要怎么设置Gravatar 没有注册的人 随机闲事头像?

    2010-12-17 21:51 [回复]
  11. avatar
    14楼
    xmwusx.cn Google Chrome Windows

    有一点想要请问下哦
    回复时候些邮箱可以干嘛用啊 在前台好像都没有体现出来

    2010-12-15 22:38 [回复]
    • avatar
      William Internet Explorer Windows

      邮件么注意是增加交流,评论回复邮件通知。
      还有就是Gravatar头像的调用,现在博客基本都有这个功能,你那个邮箱还没有注册头像,建议你注册一个,这个在评论中可以更加方便的找到你。
      其实最终目的就是增加互动吧,留网址是为了回访,增加交流

      2010-12-15 22:47 [回复]
      • avatar
        xmwusx.cn Google Chrome Windows

        我试试看 一直有点忽略回复 这个功能

        2010-12-16 16:08 [回复]
  12. avatar
    13楼
    xmwusx.cn Google Chrome Windows

    是啊 在慢慢完善 今天刚刚做好 回复引用

    2010-12-15 22:15 [回复]
    • avatar
      William Internet Explorer Windows

      哈哈,很好

      2010-12-15 22:43 [回复]
  13. avatar
    12楼
    任侠 搜狗浏览器 Windows

    pj的fck下都没用这些插件了,现在也没怎么去用ubb编辑器,每次俺都凑合着来的

    2010-12-14 23:25 [回复]
  14. avatar
    11楼
    xmwusx.cn Google Chrome Windows

    wp的这个插件已经算很容易的了,不像我 还要自己给ckeditor写插件

    2010-12-14 19:03 [回复]
    • avatar
      William Internet Explorer Windows

      嘿嘿,你那个其实应该加入一些Web2.0的元素,评论邮箱,网址不能少。

      2010-12-14 23:51 [回复]
  15. avatar
    10楼
    BestChao 世界之窗浏览器 Windows

    为什么我使用SyntaxHighlighter Evolved 高亮的代码竟然解析过来了,把表情地址路径出来了,不知你发现没?

    2010-12-14 11:14 [回复]
    • avatar
      William Internet Explorer Windows

      没有啊,很正常啊。

      2010-12-14 23:52 [回复]
  16. avatar
    9楼
    柒寂 Internet Explorer Windows

    问下 我用的也是这个插件 怎么发的没有高亮的。比如说你发的代码中有蓝色,灰色 和其他颜色 我发的就没有 这是回事额

    2010-12-14 00:31 [回复]
    • avatar
      William Internet Explorer Windows

      你是直接用的[code】This is code[/code】这种模式吧。

      想高亮显示的话用类似[php】This is code[/php】;[css】This is code[/css】;[js】This is code[/js】等这种模式

      2010-12-14 00:40 [回复]
  17. avatar
    8楼
    龙城瓶子 Mozilla Firefox Windows

    很少发代码
    懒得去弄插件。。。

    2010-12-13 12:34 [回复]
    • avatar
      William Mozilla Firefox Windows

      呵呵,我倒是经常瞎折腾些代码。所以代码插件必不可少

      2010-12-13 19:17 [回复]
  18. avatar
    7楼
    wdqzw Maxthon Windows

    这个太专业了 我是来拜神的 收藏了 看能不能用上

    2010-12-12 18:38 [回复]
  19. avatar
    6楼
    koobai Mozilla Firefox Windows

    还是你勤快没事的时候就折腾下WP,自己现在的状态是感觉看着还行就可以,不管那些所谓的功能了,呵呵。不过如果再继续这样,很快怎么折腾WP又快忘了

    2010-12-12 16:20 [回复]
    • avatar
      William Mozilla Firefox Windows

      是的,过段时间就小小的折腾下,感觉蛮好

      2010-12-13 19:17 [回复]
  20. avatar
    5楼
    雅岚 Google Chrome Windows

    呃,我来打酱油好了。。。老板,给岚女一斤生抽。。

    2010-12-12 15:21 [回复]
    • avatar
      William Mozilla Firefox Windows

      要一斤啦,木有,最多只有二两。哈哈

      2010-12-13 18:59 [回复]
  21. avatar
    4楼
    jacksuc Mozilla Firefox Windows

    后台不是可以选择版本嘛,我选择的2

    2010-12-12 12:00 [回复]
    • avatar
      William Mozilla Firefox Windows

      是滴是滴,我已经更新到最新版了,然后选择的2代的。其实我对比了下,2代的就是我之前发你的那个

      2010-12-13 18:59 [回复]
  22. avatar
    地板
    xuan律 360安全浏览器 Windows

    正在找这类的插件,虽然我文章中很少插代码,但是偶尔转载别人文章的时候还是要用到,继续寻找中..

    2010-12-12 11:54 [回复]
    • avatar
      William Mozilla Firefox Windows

      这个算是我测试下来比较不错的代码插件了

      2010-12-13 18:58 [回复]
  23. avatar
    板凳
    skidu 搜狗浏览器 Windows

    不错,板凳!
    代码框这东西我也纠结呀,现在用的WP-CodeBox在代码只有一行的情况下显示效果很不和谐。。哎,或许是我没研究这个插件的用途的过吧
    先用着,遇着更中意的了直接换

    2010-12-12 11:11 [回复]
    • avatar
      William Mozilla Firefox Windows

      恩,是的,不过代码多了,以后换就有些麻烦了

      2010-12-13 18:57 [回复]
  24. avatar
    沙发
    王晔 Internet Explorer Windows

    “使用无效文本框,上面的01是无法复制的” 在IE下其实是可以复制的,另外disabled比readonly的好处就是没有跳动的光标

    2010-12-12 09:43 [回复]
    • avatar
      William Mozilla Firefox Windows

      只要正常复制的时候不把那个行号复制走就OK了啊,对吧。

      2010-12-13 18:57 [回复]

发表评论

question razz sad smile redface biggrin surprised eek confused cool lol mad rolleyes wink neutral cry

快捷键:Ctrl+Enter