上篇 下篇

不用插件实现WordPress代码高亮显示

2010年08月01日 ⁄ Wordpress ⁄ 作者：知更鸟 ⁄ 共 3493字 ⁄ 评论数 162 ⁄ 被围观 37,061+

偶尔在日志中加入一些代码，感觉完全没必要安装代码高亮插件，万一某天不用插件了，页面可能会很乱。其实大部分插件都是在代码中强行加入一些标签，然后用CSS定义样式，通过查看页面源文件可以清楚地看到。

今天推荐的是一款本地转换代码高亮显示的小工具：CodeRenderUnmi　

下载：  CodeRenderUnmi.zip (21.1 KB, 898 次下载)

本程序是基于 dp.SyntaxHighlighter 写的代码语法着色的工具。支持的语言有:

java/xml/sql/jscript/css/cpp/c#/python/vb/perl/php/ruby/delphi。

可方便用于你的博客中粘贴代码，只要自定相应的样式 (highlight.css 的内容，.Text 支持自定义样式或在模板里加上语法样式)，然后复制用这个工具生成的 HTML 代码就能让你的代码着高亮显示。 可以加入更多语种的支持，本程序就是在 dp.SyntaxHighlighter 的基础上扩展了对 Perl 语言的支持，网上可以找到相应语法的 JS 代码和 CSS。语言扩展支持通过在 shCore.js 和 highlight.css 加入相应代码即可。

程序界面

操作很容易，Source Code 中贴上你要着色的代码，然后选择语种，点击 Render 按钮就会在 HTML Code 中生成相应的 HTML 代码，同时在 HTML Preview 中可以预览到效果。

简要说明：Lang 下拉框可以选择所支持的语法，Options 右边的 Gutter、Controls、CollapseAll、FirstLine、Columns 是控制生成的额外的元素，逐一点试试就知道了。每个内容显示(输入)区都提供了 Copy/Paste/Clear 快捷操作链接，还有一个总的 Clear 按钮。

Copy生成 的HTML 代码，在日志编辑窗口切换到HTML源代码编辑模式，粘贴就可以了。

不过要想正确显示代码高亮还需在WordPress主题中加载样式文件“highlight.css”（在下载的压缩包中）

方法：

首先，把highlight.css上传到所使用主题目录中；

其次：打开header.php，查找：

1. <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" />

在后面添加：

1. <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/highlight.css" />

当然，你也可以复制highlight.css中的所有代码到你主题style.css中，以上步骤就免了！

如认为默认的样式不符合自己的要求，可以通过修改“highlight.css”中的样式改变代码高亮、边框、背景等颜色，更个性化。

但需要注意的是Wordpress会自动把半角符号替换为全角，别人复制下来的函数代码标点是全角的，无法使用，切记！

解决办法：

1. 打开并编辑 wp-includes/formatting.php 文件，找到以下代码：
2. // static strings
3. $curl = str_replace($static_characters, $static_replacements, $curl);
4. // regular expressions
5. $curl = preg_replace($dynamic_characters, $dynamic_replacements, $curl);
6. 将$curl 开头的两句代码注释掉，如下：
7. // static strings
8. //$curl = str_replace($static_characters, $static_replacements, $curl);
9. // regular expressions
10. //$curl = preg_replace($dynamic_characters, $dynamic_replacements, $curl);

注:使用IE核心浏览器复制代码时会将行号一起复制下来，可以参考这篇文章去掉行号：小技巧:帮你批量删除代码前的行号，或才使用火狐、chrome等浏览器。

具体效果在第２页：

日志分页: 1 2

返回

作者: 知更鸟

该日志由 知更鸟 于661 天前发表在Wordpress分类下， 你可以发表评论，并在保留原文地址及作者的情况下引用到你的网站或博客。
转载请注明: 不用插件实现WordPress代码高亮显示 | 知更鸟 +复制链接
关键字: Wordpress, 代码高亮

您可能还会对这些文章感兴趣！

1. 在文章中添加一个广告位
2. 为Wordpress链接关系（rel）添加external和nofollow选项
3. Wordpress主题侧边栏随窗口滚动
4. HotNews Pro 2.7 Plus侧边最新文章中排除分类
5. 单篇文章嵌入不同的RSS或Atom feed地址
6. jQuery实现侧边栏随窗口滚动
7. WordPress博客评论可见实现方法
8. 为Wordpress添加文章字数统计

目前有 162 条留言 其中：访客:79 条, 博主:17 条 引用: 66

1. Carrie : 2010年08月01日 660 天前 23:02:35  1楼 @回复 回复

   這樣又能少用一款插件了，感覺很不錯，不過還得稍作修改一番。
2. QiQiBoY : 2010年08月01日 660 天前 23:10:14  2楼 @回复 回复

   这个不错。。。。
3. winy : 2010年08月01日 660 天前 23:48:15  3楼 @回复 回复

   要是谁能做个wlw插件就更好了。。。
4. 雅岚 : 2010年08月05日 657 天前 01:35:02  4楼 @回复 回复

   想用用来着，可是又把我看得头昏眼花。。。算了，哈哈
5. 民工成 : 2010年08月09日 652 天前 20:57:28  5楼 @回复 回复

   good，挺不错的啊，能少个插件就少一个~
6. 淘宝最好的减肥药 : 2010年08月12日 650 天前 13:13:03  6楼 @回复 回复

   看起来好麻烦，头晕中
7. uyghurbeg : 2010年08月25日 637 天前 05:03:13  7楼 @回复 回复

   我发现,你的博客的图片在闪闪,不知道怎么弄?
   • 知更鸟 : 2010年08月25日 637 天前 08:51:32 @回复 回复

     看这个
     http://zmingcx.com/using-jquery-to-achieve-picture-was-hidden-effects.html
8. 笨小孩 : 2010年08月27日 634 天前 17:38:37  8楼 @回复 回复

   我把他弄成在线的了，哈哈~~
   给个演示地址：在线演示
   可惜是免费空间有广告，预览效果不是很完整，囧....
   • 笨小孩 : 2010年09月07日 624 天前 15:40:10 @回复 回复

     大侠，能把你现在在用的这个工具发给我吗？
     我发现下载的那个html符号全是大写，而且代码也没你的简洁，希望能得到你的这个，我邮箱：darknet@qq.com 谢谢了！！！
     • 知更鸟 : 2010年09月07日 624 天前 16:03:48 @回复 回复

       文章中有下载链接，我用的也是这个
       • 笨小孩 : 2010年09月07日 623 天前 17:30:40 @回复 回复

         为什么你的源码中的代码要比我们的简洁一些了？而且全是小写的，应该是你修改了shCore.js，我对比了我们生成的代码，我们的有很多不必要的代码，而你的却没有，本来是想自己修改的，但是工作量太大了，再加上自己不是很懂，所以就厚脸皮问你要你的文件了，希望大侠能发一份你的工具。
9. 豌豆尖 : 2010年09月03日 628 天前 09:59:09  9楼 @回复 回复

   使用怎么也达不到以上的效果，而且数字序号和代码挨在一起，序号左边是分割线，郁闷啊，是不是还要修改highlight.css啊？？？
   • 知更鸟 : 2010年09月03日 628 天前 10:38:20 @回复 回复

     这个是与你用的主题样式文件冲突
     • 豌豆尖 : 2010年09月03日 628 天前 11:02:33 @回复 回复

       回复好快啊！用的是Elegant Box 4.1.1主题，有办法解决没？对这方面不是很懂！
10. 桔子 : 2010年09月21日 610 天前 15:16:46  10楼 @回复 回复

    谢谢，安上了，效果不错。比以前的插件好多了。
11. 阿鼎 : 2010年09月28日 603 天前 11:19:34  11楼 @回复 回复

    鸟哥，我按照你说的做了，但是行与行之间为什么有空格，看着没你上面的美观，演示地址
    • 知更鸟 : 2010年09月28日 603 天前 13:05:24 @回复 回复

      嗯，确实有这个问题，不过也很好解决：
      在源代码模式粘贴完转换的代码后，再切换到可视化编辑模式发布，即可
      • 阿鼎 : 2010年09月28日 603 天前 16:42:42 @回复 回复

        3Q,鸟哥，呵呵，等待你出3.0，呵呵！加油！
        • Ken : 2010年09月29日 602 天前 15:58:08 @回复 回复

          顶一下～ 等待中
      • 沫夏 : 2011年11月07日 197 天前 22:32:02 @回复 回复

        原来这样，成功解决行与行之间含有空格现象，谢谢。
      • 程春杰博客 : 2012年05月05日 18 天前 11:29:10 @回复 回复

        精妙啊，在这里我发现了评论的巨大意义，我也碰到了类似问题，在此找到解决方法，，谢谢鸟哥
12. 洋葱 : 2010年10月07日 594 天前 00:37:09  12楼 @回复 回复

    我用你的方法，代码是高亮了，可是显示出来的是全角的。文章在这里http://blog.aonion.com/2010/10/no-plug-ins-are-two-ways-to-achieve-the-relevant-log/
    问题是在formatting.php吗？这样改吗？
    // static strings
    $curl = str_replace($static_characters, $static_replacements, $curl);
    // regular expressions
    $curl = preg_replace($dynamic_characters, $dynamic_replacements, $curl);
    // static strings
    //$curl = str_replace($static_characters, $static_replacements, $curl);
    // regular expressions
    //$curl = preg_replace($dynamic_characters, $dynamic_replacements, $curl);
    • 知更鸟 : 2010年10月07日 594 天前 06:16:04 @回复 回复

      只需在两个$curl前加上// ，后面最好有一英文空格
13. 凡尘飞扬 : 2010年10月09日 592 天前 15:44:30  13楼 @回复 回复

    试试看，插件用的比较多，该少用点了
14. 朵未 : 2010年10月25日 575 天前 22:26:58  14楼 @回复 回复

    请问这个该如何调用？
15. 邪客 : 2010年10月26日 575 天前 11:48:47  15楼 @回复 回复

    编辑器里面显示正常，但是发布以后不显示行数，请教博主何故？
    例：http://www.xeker.org/archives/1424

    谢谢！
    • 知更鸟 : 2010年10月26日 575 天前 11:55:22 @回复 回复

      可能你用的主题样式文件与这个冲突
      去掉这句
      #content li {
      list-style-type:none;
      }
16. bestchao : 2010年10月26日 574 天前 17:19:30  16楼 @回复 回复

    鸟哥不知你现在使用的代码高亮功能是插件还是修改版本？
    • 知更鸟 : 2010年10月26日 574 天前 23:01:29 @回复 回复

      晕菜...我白写这么长的使用说明了
17. Ding : 2010年10月29日 572 天前 08:38:46  17楼 @回复 回复

    测试下有邮件没
18. yesureadmin : 2010年11月02日 568 天前 14:38:02  18楼 @回复 回复

    不错，不过，还是觉得插件省事，这个插件是少不了的啦
19. easy : 2010年11月08日 562 天前 13:30:47  19楼 @回复 回复

    这个我喜欢,多谢分享!
20. 七寂 : 2010年12月11日 528 天前 21:53:30  20楼 @回复 回复

    博主 用的了你的软件 文章的第1篇代码显示 正确的

    后来我又在文章下面的粘贴代码

    结果 显示 每段代码中间都空一行

    不知道怎么回事
    • 知更鸟 : 2010年12月11日 528 天前 22:14:24 @回复 回复

      从代码编辑模式，切换到可视化再发布，即可
      • 七寂 : 2010年12月11日 528 天前 22:42:48 @回复 回复

        多谢啦 搞定了
21. sky : 2010年12月30日 510 天前 10:07:50  21楼 @回复 回复

    还是觉得好麻烦的啊
22. likebeta : 2011年01月13日 496 天前 11:19:15  22楼 @回复 回复

    哈哈,我找了一个coolformat也不错,离线编辑也不错,插件每一个真正好用的
    • 知更鸟 : 2011年01月13日 496 天前 12:17:13 @回复 回复

      除了代码沉余外，没有行号
      • 路过 : 2011年05月18日 371 天前 15:01:34 @回复 回复

        代码发芽网也是用这种方式的，在冗余的同时，却支持任何支持HTML网页、博客。好像也已经加了行号显示了
23. 海子 : 2011年01月13日 496 天前 11:43:07  23楼 @回复 回复

    鸟哥，我用了你介绍的高亮显示代码的使用方法，软件生成的效果和你发布在文章中的效果一样，但是我在发布时显示的效果没有外部的边框。
24. yixin : 2011年01月23日 485 天前 22:24:58  24楼 @回复 回复

    学习了，真的不错~~！！！
25. 何苦呢 : 2011年01月30日 478 天前 20:59:22  25楼 @回复 回复

    不用插件的话 好麻烦呢
26. 小司 : 2011年02月11日 467 天前 14:12:06  26楼 @回复 回复

    鸟哥，麻烦问一下，我申请了免费的co.cc域名，现在与vista panel里的域名绑定起来了。就是在服务器/root下新建了以xsblog.co.cc为名字的文件夹，里面还有一个htdoc文件夹。然后，我想着是以后通过xsblog.co.cc这个域名访问页面，就不让它出现自带的三级域名了，那下一步应该怎么做啊，把wordpress放到哪儿呢
27. 知更鸟 : 2011年02月11日 467 天前 14:33:58  27楼 @回复 回复

    米玩过这个免费的空间
    随便在空间里建一个目录把程序放进去，获得地址安装就行
28. 碎语人生 : 2011年02月18日 459 天前 19:56:36  28楼 @回复 回复

    代码太多了，我看得眼花缭乱
29. 南阳吧 : 2011年02月24日 454 天前 16:54:42  29楼 @回复 回复

    谢谢知更鸟大哥，正需要这样的，我去试试先。
30. 你好美丽 : 2011年03月04日 446 天前 15:40:25  30楼 @回复 回复

    不错的工具，下来用用！谢谢分享
31. 晨光博客 : 2011年03月09日 440 天前 22:17:55  31楼 @回复 回复

    不用插件是最好的
32. 瞿胜佳 : 2011年03月13日 436 天前 20:58:19  32楼 @回复 回复

    这个可以有。
33. Kael.Z : 2011年03月15日 434 天前 23:58:05  33楼 @回复 回复

    鸟哥，发布后看不到序号，编辑后切换回非代码模式时能看到序号，何解？
34. Kael.Z : 2011年03月16日 433 天前 20:41:16  34楼 @回复 回复

    鸟哥，我代码无法显示行号
    • eng_4ow : 2011年03月17日 433 天前 09:14:42 @回复 回复

      测试
35. 孤独快乐 : 2011年04月01日 418 天前 16:54:55  35楼 @回复 回复

    为什么我的也不显示行号啊
    • 知更鸟 : 2011年04月03日 416 天前 09:03:54 @回复 回复

      应该是与你用的主题样式冲突
36. 孤独快乐 : 2011年04月01日 417 天前 17:08:03  36楼 @回复 回复

    我的也是不显示行号啊
37. Shovo : 2011年04月06日 413 天前 10:22:13  37楼 @回复 回复

    能不能做成插件整到编辑器中呢？
38. barrett : 2011年04月23日 396 天前 11:43:24  38楼 @回复 回复

    非常感谢，按照您的方法我成功实现了。只是有一个问题：在代码最后会空出一行，而您的网站上则不是这样的。请指导我的网站http://gdlf.tht.cmded.net/
    • 知更鸟 : 2011年04月23日 396 天前 12:47:53 @回复 回复

      把下面这句从主题样式中删除

      1. #content p, #content ul, #content ol, #content dd, #content pre, #content hr{   
      2.     margin-bottom: 24px;   
      3. }  
39. 仰肖 : 2011年06月03日 355 天前 02:14:40  39楼 @回复 回复

    试了好多遍，老是有问题。。。郁闷。。
40. 潇湘竹溪 : 2011年07月17日 311 天前 15:43:23  40楼 @回复 回复

    很想知道第一页的那些代码高亮是怎么弄的
41. 百家乐 : 2011年08月08日 288 天前 17:09:47  41楼 @回复 回复

    看着别人改得好漂亮啊
42. 站长工具 : 2011年09月12日 254 天前 12:07:28  42楼 @回复 回复

    节日快乐！！！！！！！！
43. 亨sir : 2011年09月29日 237 天前 15:59:09  43楼 @回复 回复

    附图：
    我的序号移位了，请问是哪里的问题呢
44. 亨sir : 2011年09月29日 237 天前 16:02:10  44楼 @回复 回复

    就是序号本来应该在第一纵格的，但放到我博客就移到后面的代码里头了，http://www.hanso.me/zheteng.html文章末尾小段代码！请指教
45. 亨sir : 2011年10月01日 235 天前 01:56:16  45楼 @回复 回复

    虽然没被理
    仍送上祝福
    节日快乐
    • 知更鸟 : 2011年10月01日 235 天前 09:07:50 @回复 回复

      节日快乐！
      上面的问题是因为样式冲突，可以打开主题style.css查找并删除
      list-style-position: inside;
      • 亨sir : 2011年10月01日 234 天前 21:08:22 @回复 回复

        嘎嘎！
        谢谢
        已经好了！
46. maxling.net : 2011年10月01日 234 天前 19:47:08  46楼 @回复 回复

    来学习了！！
47. 沫夏 : 2011年11月07日 197 天前 22:16:44  47楼 @回复 回复

    为什么dbank网盘里下载下来的是CodeRender.hta，扩展名被改了？
    • 知更鸟 : 2011年11月07日 197 天前 22:34:12 @回复 回复

      估计dbank网盘也在耍流氓
      已改为本站下载
48. 文献代理 : 2011年11月19日 186 天前 00:26:35  48楼 @回复 回复

    不知道为什么我的header.php中没有“<link rel="stylesheet" type="text/css" href="/style.css" />”这段代码。
    “<link rel="stylesheet" href="" type="text/css" media="screen" />
    <link rel="stylesheet" href="/css/css.css" />
    <link rel="stylesheet" href="/css/highlight.css" />
    <link rel="stylesheet" href="/css/img.css" />
    <link rel="alternate" type="application/rss+xml" title=" RSS Feed" href="" />
    <link rel="alternate" type="application/atom+xml" title=" Atom Feed" href="" />
    <link rel="pingback" href="" />
    <link rel="shortcut icon" href="/images/favicon.ico" />”
49. caruc : 2011年12月08日 167 天前 02:36:03  49楼 @回复 回复

    鸟哥帮我看看为什么我的也不显示序号
    这个是测试的http://www.asgoo.in/blog/?p=214&preview=true
    • 知更鸟 : 2011年12月08日 167 天前 12:00:06 @回复 回复

      打开主题样式文件删除
      .context ol {margin-left:20px}
      试试
      • caruc : 2011年12月08日 167 天前 13:33:40 @回复 回复

        谢谢鸟哥！虽然没有解决但是还是谢谢你！因为像你这种无私奉献的博主很少！

        希望改主题越来越强大！
50. 数据库之家 : 2011年12月13日 161 天前 19:56:36  50楼 @回复 回复

    怎么实现 访问量功能啊，不要插件！

    谢谢！