怎样实现不用插件使WordPress代码高亮（加色）

对于一个技术站的博客，要展示代码的地方很多。为了美化代码的显示效果，使WordPress代码高亮显示是最好的方式。目前网络上有许多WordPress代码高亮的插件，不过都很臃肿。

例如常见的WordPress代码高亮插件

1、Google Syntax Highlighter for WordPress

一款帮助开发者/coder 发表代码片段更加简单和漂亮的插件。完全基于javascript。Google Syntax Highlighter目前还是博主们的流行选择。Google Syntax Highlighter 有一个文本化的工具栏，没有Syntax Highlighter家族那么花俏但是却功能一样。不过无法实现切换从可视模式到HTML模式。

2、Code Colorer

这是国人根据 Chroder.com 的 WordPress Code Highlight 插件修改而成的WordPress代码高亮插件。但 CoolCode 插件在它基础上修改了很多的内容。支持10多种语言代码，详情看作者的发布页。

3、Syntax Highlighter

一个使用可视化标记并且在不同模式之间切换还能工作的插件。一旦你在可视化模式粘贴代码，不需要加上转义字符，这是在可视化编辑模式下的优势。但是当我使用它自带的例子时，不管我怎么做，我都没有办法通过WP-SynHightlight为代码着色。

4、WP-Syntax

支持高亮、添加行序号，复制到剪贴板等功能

插件地址：http://wordpress.org/extend/plugins/wp-syntax

5、Raw HTML

最简洁的代码美化插件了吧应该是，运行在服务器端，也就说不写入js

插件地址：http://wordpress.org/extend/plugins/raw-html

6、Highlight Source Pro

支持高亮、添加行序号，同样运行在服务器端，也就说不写入js

插件地址：http://wordpress.org/extend/plugins/highlight-source-pro/

7、CodeHighlighter

支持高亮、可以修改CSS文件改变样式，样式简洁

插件地址：http://wordpress.org/extend/plugins/code-highlighter/

8、WP-CodeBox

支持高亮、添加行序号、下载代码、粘贴到剪贴板和代码折叠等功能，不知道为什么在我的博客上面为什么启用不了，大家用了的给提个建议

下载地址：http://downloads.wordpress.org/plugin/wp-codebox.zip

9、CodePress Plugin for WordPress

下载地址：http://downloads.wordpress.org/plugin/wp-codepress.zip

插件带来的问题

基本上安装上面的代码高亮插件，都会出现一个明显的现象，网站访问速度明显下降。其实大部分插件都是在代码中强行加入一些标签，然后用CSS定义样式，此外还需加载许多的JS，通过查看页面源文件可以清楚地看到。最大的问题是万一某天不用插件了，页面代码将全部显示乱掉。

无插件实现的方法

方法1：借助一个叫“发芽网”的在线代码高亮转换网站

使用发芽网 的代码高亮编辑器，使用很简单，把你的代码直接贴到编辑器里面，然后复制html到你的网页里面，代码就高亮显示了，你还可以自定义背景颜色与字体样式，效果应该比代码高亮插件丰富得多。如果感兴趣可以到发芽网试试，但每次转换都需打开网址操作略显麻烦。

效果：

 

CSS语言 :

#site-title a {
color : #000 ;
font-weight : bold ;
text-decoration : none ;
}
#site-description {
clear : rightright ;
float : rightright ;
font-style : italic ;
margin : 14px 0 18px 0 ;
width : 220px ;

方法2：借助一款本地转换代码高亮显示的小工具：CodeRender

CodeRender小软件，本程序是基于dp.SyntaxHighlighter 写的代码语法着色的工具，支持常见的语言，例如java/xml/sql/jscript/groovy/css/cpp/c#/python/vb /perl/php/ruby/delphi。

操作很容易，在Source Code 中贴上你要着色的代码，然后选择语种，点击 Render 按钮就会在 HTML Code 中生成相应的 HTML 代码，同时在 HTML Preview 中可以预览到效果。Copy生成 的HTML 代码，在日志编辑窗口切换到HTML源代码编辑模式，粘贴就可以了。

软件下载地址：

代码高亮显示的小工具：CodeRender	文件大小：24.3 KB
更新时间：2010/08/21	累计下载：179 次

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

建议大家直接复制highlight.css中的代码到主题style.css文件中。如果你不喜欢原有的代码高亮方式，可以通过 修改“highlight.css”中的样式改变代码高亮、边框、背景等颜色。

当然你也可以在将highlight.css文件上传到主题目录下，在header.php中加载highlight.css。

方法如下：

 

<
link
 
rel
=
“stylesheet”
 
type
=
“text/css”
 
href
=
“<?php bloginfo(‘template_directory’); ?>/style.css”
 
/>

方法缺陷：

WordPress默认会自动把半角符号替换为全角，那样别人复制下来的函数代码标点是全角的，就无法正常使用。因此需要修改wordpress程序文件。

方法1：

打开主题的functions.php文件, 添加下面的代码，让文章内容的过滤器失效, 达到显示代码的作用。

 

<?php remove_filter(‘the_content’, ’wptexturize’); ?>

方法2：

 

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

效果如下：

<?php 
// Do not delete these lines
    
if
 (‘comments.php’ == 
basename
(
$_SERVER
['SCRIPT_FILENAME'])) {
        
die
 (‘Please 
do
 not load this page directly. Thanks!’);
    }
  
if
 (!
empty
empty
(
$post
->post_password)) {
    
if
 (
$_COOKIE
['wp-postpass_' . COOKIEHASH] != 
$post
->post_password) {
        ?>
        <p 
class
=
“alert”
>This post is password 
protected
. Enter the password to view comments.</p>
        <?php
        
return
;
    }
  }

  
$countComments
 = 0; 
$countPings
 = 0;
  
if
 (
$post
->comment_count > 0) {
    
$comments_list
 = 
array
();
    
$pings_list
 = 
array
();
    
foreach
 (
$comments
 
as
 
$comment
) {
        
if
 (‘comment’ == get_comment_type()) 
$comments_list
[++
$countComments
] = 
$comment
;
        
else
 
$pings_list
[++
$countPings
] = 
$comment
;
    }
  }

?>