上篇 下篇

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

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

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

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

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

本程序是基于 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

返回

作者: 知更鸟

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

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

1. jQuery实现侧边栏随窗口滚动
2. WordPress博客评论可见实现方法
3. 为Wordpress添加文章字数统计
4. 显示当前在线浏览人数
5. 揪出哪些插件在拖慢你的网站
6. 优化一下HotNews Pro主题SEO代码
7. 为Wordpress默认编辑器TinyMCE增加额外的按钮
8. 为WordPress编辑器设置默认内容

目前有 127 条留言 其中：访客:69 条, 博主:17 条 引用: 41

1. SKF轴承,NSK轴承 : 2011年12月17日 53 天前 17:24:19  51楼 @回复 回复

   顶！期望能分享！！！！
2. 小乖乖 : 2012年01月03日 37 天前 04:01:34  52楼 @回复 回复

   鸟哥 请问代码是什么插件？
   • 知更鸟 : 2012年01月04日 35 天前 18:19:51 @回复 回复

     看着文章还问是什么插件？
3. dmaojie : 2012年01月07日 32 天前 20:07:10  53楼 @回复 回复

   看看行不行
4. 皆为浮云 : 2012年01月15日 24 天前 22:01:05  54楼 @回复 回复

   鸟哥，现在你还是用的这个方法吗？
   2.7版本的主题里，现在有没有添加这些代码？
   • 知更鸟 : 2012年01月15日 24 天前 22:49:44 @回复 回复

     是的，一直在用
5. 卧龙居 : 2012年01月28日 12 天前 12:44:05  55楼 @回复 回复

   这个好像不支持html代码，有其他的方法能让主题支持html吗？
6. 东东@丫丫情侣博客 : 2012年02月05日 4 天前 13:25:45  56楼 @回复 回复

   为什么我用了你的代码高亮的方法显示的和你的不一样啊
   这是我在文章中插入的代码

     
   /*
    * Superfish v1.4.8 - jQuery menu widget  
    * Copyright (c) 2008 Joel Birch  
    *  
    * Dual licensed under the MIT and GPL licenses:  

   这是文章页面加载的你的css样式和js代码

   但是显示效果和你的不一样啊
   你可以点击这个链接看看我的代码高亮显示的，前面没有像你的一样数字行号
7. 东东@丫丫情侣博客 : 2012年02月05日 4 天前 13:26:30  57楼 @回复 回复

   求解，很急用，麻烦鸟哥啦
8. 东东@丫丫情侣博客 : 2012年02月05日 4 天前 13:29:21  58楼 @回复 回复

   http://blog.woyaya.net/navigation-menu-on-wordpress-standard-analytical-analysis.html 你可以点击这个页面看看我的代码高亮，查看页面源代码的话你会发现我加载的是你的、highlight.css 和 jquery.colorbox.js 还有一个问题就是我是网站分类和页面的关键词描述，那些也按照你的方法改的，可是中间为什么出现了那么多空行啊 你随便点击一个分类的页面查看源代码就看到啦，帮帮忙
9. 东东@丫丫情侣博客 : 2012年02月05日 4 天前 13:30:46  59楼 @回复 回复

   如果方便的话加一下我的QQ1282570027，谢谢啊