在此前也已经找到不少wordpress非插件实现代码高亮/语法高亮的方法，一直没有集成到主题中，
换了WPGO主题之后，发现这款码农的作品语法高亮居然……好丑。可能是初级版本，作者没有在意太多。
索性今天就给这个主题加了代码高亮，Google prettify。不然pre的样式看起来很不舒服，
这个方法不复杂，只需要在jQuery支持的情况下 添加一个js 以及一些CSS样式
整体步骤如下：
引用jQuery库
一般的主题都应该加了，可能在头部也可能在底部，一般我们在footer.php加载：
<script type="text/JavaScript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.8.3.min.js"></script>
引用prettify.js
加载prettify.js脚本，也是在footer.php加载：
<script type="text/javascript" id="wpgo_global_js" src="<?php bloginfo('template_directory'); ?>/js/prettify.js"></script>
注意：JV是将这两个js脚本放在了主题目录的js文件夹下，如果你要放在别的地方，则需要修改上面的加载路径。
下面是最新的prettify.js以及prettify.css压缩包下载
pre相关标签的替换
如果涉及到之前pre标签的语法高亮，比如添加了 class="brush:bash" 等类，我们就需要对其进行替换，替换方法可以用js，也可以用wp的过滤器钩子，后者效率较高，添加入 functions.php 即可
<?php
// 替换pre标签为自定义形式
add_filter('the_content', 'pre_to_prettify');
function pre_to_prettify($addClass){
$replace = array(
'<pre>' => '<pre class="prettyprint">',
'<pre class="prettyprint linenums">' => '<pre class="prettyprint">',
'<pre class="brush:bash">' => '<pre class="prettyprint linenums">',
'<pre class="brush:bash;light:false;title:;toolbar:true;">' => '<pre class="prettyprint linenums">',
'<pre class="brush:css;light:false;title:;toolbar:false;">' => '<pre class="prettyprint linenums">',
'<pre class="brush:html;light:false;title:;toolbar:false;">' => '<pre class="prettyprint linenums">',
'<pre class="brush:php;light:false;title:;toolbar:true;">' => '<pre class="prettyprint linenums">',
'<pre class="brush:css;light:false;title:;toolbar:true;">' => '<pre class="prettyprint linenums">',
'<pre class="brush:js;light:false;title:;toolbar:true;">' => '<pre class="prettyprint linenums">',
);
$addClass = str_replace(array_keys($replace), $replace, $addClass);
return $addClass;
}
?>
上面包含了几种替换/添加class的类型，可以自行修改！
最后，值得提醒的是，如果是ajax异步加载，需要重载的函数为：prettyPrint();
而且涉及到代码的字体一般使用 Monaco.TTF 字体。
如果需要只在pre出现的页面加载请用下面的js代码
//Codehighlight
function find(a, b) {
var f, g, h, c = $("#container").find(a), d = $(window).scrollTop(), e = d + window.innerHeight;
for (f = 0; f < c.length; f++) g = $(c[f]).offset().top, h = g + $(c[f]).height(),
(e > g && g > d || e > h && h > d) && b(c[f]);
}
function getScript(a, b) {
$.ajax({
url: a,
dataType: "script",
cache: !0,
success: b
});
}
function load_prettify() {
find("pre", function() {
if (0 == load) {
if (1 == getScriptLock) return;
getScriptLock = 1, getScript(theme_dir + "js/prettify/prettify.js", function() {
$("head").append('<link type="text/css" rel="stylesheet" href="' + theme_dir + 'js/prettify/prettify.css"/>'),
getScriptLock = 0, load = 1, load_prettify();
});
} else prettyPrint();
});
}
var load, getScriptLock, theme_dir;
$(window).bind("resize", function() {
load_prettify();
}), $(window).bind("scroll", function() {
load_prettify();
}), load = 0, getScriptLock = 0, theme_dir = $("head #default-css").attr("href").split("style.css")[0];
load_prettify()需要初始化，然后重载，OK，教程到此结束，赶快去试试吧！
