怎样实现不用插件使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:14px018px0;

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//Donotdeletetheselines

if(‘comments.php’==basename($_SERVER['SCRIPT_FILENAME'])){

die(‘Pleasedonotloadthispagedirectly.Thanks!’);

}

if(!emptyempty($post->post_password)){

if($_COOKIE['wp-postpass_'.COOKIEHASH]!=$post->post_password){

<pclass=“alert”>Thispostispasswordprotected.Enterthepasswordtoviewcomments.</p>

<?php

return;

}

}$countComments=0;$countPings=0;

if($post->comment_count>0){

$comments_list=array();

$pings_list=array();

foreach($commentsas$comment){

if(‘comment’==get_comment_type())$comments_list[++$countComments]=$comment;

else$pings_list[++$countPings]=$comment;

}

}?>

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

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

无插件实现的方法

方法缺陷：

相关推荐