当前位置：首页 > 设计 > 正文

WordPress代码高亮插件SyntaxHighlighter Evolved的行号问题

William2010-12-12 01:23设计20,628次阅读43条评论

扫一扫手机看

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等浏览器则在复制的时候行号也像是被复制的样子，当然是粘贴的是不会粘贴出行号来的，但是这样容易有误解，以为将行号也复制进去了，不过这个就真的改不起来了。

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

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

赏

【上一篇】WordPress侧边栏JQuery版TAB选项卡
【下一篇】CSS3 Google Android小机器人

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

24楼
精剪：

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

2013-06-26 19:31 回复
- William博主：
  
  @精剪我用的runcode by soncy这个插件。
  http://wordpress.org/plugins/runcode-by-soncy/
  
  2013-06-26 20:53 回复
23楼
鸟：

试过好几个多不理想就撤掉了！

2013-04-11 09:40 回复
22楼
小波：

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

2012-04-22 23:32 回复
21楼
wordpress插件：

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

2012-03-26 21:38 回复
20楼
赤霄：

感谢，修改的js太好了

2012-01-13 12:03 回复
19楼
mspring：

网站又换主题了呀。

2011-10-08 10:26 回复
18楼
Pablo：

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

2011-06-08 22:14 回复
- William博主：
  
  @Pablo我用的2.x版的，
  https://www.weisay.com/blog/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/shCore.js
  替换就行了。
  
  2011-06-10 17:10 回复
17楼
bjmayor：

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

2011-03-14 21:56 回复
- William博主：
  
  @bjmayorWordPress的代码插件我至今没有发现一个很好的，都是比较笨重的那种，加载了很多的JS。
  
  2011-03-15 22:35 回复
16楼
冰棱：

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

2011-02-11 23:30 回复
- William博主：
  
  @冰棱不会呀应该能正常使用的，我就修改了去掉复制行号了，其他的都没有动
  
  2011-03-15 22:33 回复
15楼
xmwusx.cn：

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

2010-12-17 21:51 回复
14楼
xmwusx.cn：

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

2010-12-15 22:38 回复
- William博主：
  
  @xmwusx.cn邮件么注意是增加交流，评论回复邮件通知。
  还有就是Gravatar头像的调用，现在博客基本都有这个功能，你那个邮箱还没有注册头像，建议你注册一个，这个在评论中可以更加方便的找到你。
  其实最终目的就是增加互动吧，留网址是为了回访，增加交流
  
  2010-12-15 22:47 回复
  - xmwusx.cn：
    
    @William我试试看一直有点忽略回复这个功能
    
    2010-12-16 16:08 回复
13楼
xmwusx.cn：

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

2010-12-15 22:15 回复
- William博主：
  
  @xmwusx.cn哈哈，很好
  
  2010-12-15 22:43 回复
12楼
任侠：

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

2010-12-14 23:25 回复
- William博主：
  
  @任侠我之前在PJ上修改过，能使用这个发布代码，不过后来版本升级，我就没有继续修改。
  https://www.weisay.com/blog/syntaxhighlighter-for-pjblog.html
  
  2010-12-14 23:33 回复
11楼
xmwusx.cn：

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

2010-12-14 19:03 回复
- William博主：
  
  @xmwusx.cn嘿嘿，你那个其实应该加入一些Web2.0的元素，评论邮箱，网址不能少。
  
  2010-12-14 23:51 回复
10楼
BestChao：

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

2010-12-14 11:14 回复
- William博主：
  
  @BestChao没有啊，很正常啊。
  
  2010-12-14 23:52 回复
9楼
柒寂：

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

2010-12-14 00:31 回复
- William博主：
  
  @柒寂你是直接用的[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 回复
8楼
龙城瓶子：

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

2010-12-13 12:34 回复
- William博主：
  
  @龙城瓶子呵呵，我倒是经常瞎折腾些代码。所以代码插件必不可少
  
  2010-12-13 19:17 回复
7楼
wdqzw：

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

2010-12-12 18:38 回复
6楼
koobai：

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

2010-12-12 16:20 回复
- William博主：
  
  @koobai是的，过段时间就小小的折腾下，感觉蛮好
  
  2010-12-13 19:17 回复
5楼
雅岚：

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

2010-12-12 15:21 回复
- William博主：
  
  @雅岚要一斤啦，木有，最多只有二两。哈哈
  
  2010-12-13 18:59 回复
4楼
jacksuc：

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

2010-12-12 12:00 回复
- William博主：
  
  @jacksuc是滴是滴，我已经更新到最新版了，然后选择的2代的。其实我对比了下，2代的就是我之前发你的那个
  
  2010-12-13 18:59 回复
地板
xuan律：

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

2010-12-12 11:54 回复
- William博主：
  
  @xuan律这个算是我测试下来比较不错的代码插件了
  
  2010-12-13 18:58 回复
板凳
skidu：

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

2010-12-12 11:11 回复
- William博主：
  
  @skidu恩，是的，不过代码多了，以后换就有些麻烦了
  
  2010-12-13 18:57 回复
沙发
王晔：

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

2010-12-12 09:43 回复
- William博主：
  
  @王晔只要正常复制的时候不把那个行号复制走就OK了啊，对吧。
  
  2010-12-13 18:57 回复