前篇文章中详细的介绍了Prettify的使用方法,但是如果我们使用WordPress这样的动态建站程序,在WordPress中如何使用Prettify代码高亮插件,这篇文章将详细给您介绍。

在客户端判断是否加载
首先在你的网页的head中加入如下代码:


<link rel="stylesheet" id="is-load-css" _href="sons-of-obsidian.css"/>
<script id="is-load-js" id="is-load-js" _src="js/run_prettify.js"></script>

接着把如下代码加入到网页的onload事件中:


if(document.getElementsByTagName('pre').length > 0){
    //判断网页中是否存在pre标签,要是存在就加载相对应的CSS和JS文件
    var is_load_css =document.getElementById('is-load-css'),
        is_load_js = document.getElementById('is-load-js');
    is_load_css.src = is_load_css.attributes['_src'].nodeValue;
    is_load_js.src = is_load_js.attributes['_src'].nodeValue;
}

你按照上面的地址把run_prettify.js文件下载下来,然后再最后面,加入如下代码:

window.prettyPrint && prettyPrint();
然后再把上面link,script中标签中的_src改成你要加载的文件地址即可。

这样做其实也可以,但是你每次要使用pre标签时,必须在加入class=”prettyprint linenums”。那我们就用Js来添加这些class吧!改过后的代码如下


var pre_list = document.getElementsByTagName('pre');
if(pre_list.length > 0){
    //判断网页中是否存在pre标签,要是存在就加载相对应的CSS和JS文件
    for(var i=0; i<pre_list.length; i++){
        pre_list[i].clssName = 'prettyprint linenums';
    }
    var is_load_css =document.getElementById('is-load-css'),
        is_load_js = document.getElementById('is-load-js');
    is_load_css.src = is_load_css.attributes['_src'].nodeValue;
    is_load_js.src = is_load_js.attributes['_src'].nodeValue;
}

如果你在你的网页中调用了jQuery,你可以更加简单。你只用把run_prettify.js下载下来,再将下面代码加入到其后面
window.prettyPrint && prettyPrint();
接着在header中加入以下jQuery代码:


jQuery(document).ready(function(){
    var pre_list = jQuery('pre').length>0 ? $('pre') : false;
    if(pre_list){
        pre_list.addClass('prettyprint linenums');
        jQuery('<link rel="stylesheet" src="sons-of-obsidian.css" / >').appendTo('body');
        jQuery('<script src="run_prettify.js" >< /script>').appendTo('body');
    }
});

客户端判断的缺点
要多加一部分代码才能起作用。

run_prettify.js文件要在页面加载完成后才开始加载。
run_prettify.js再次运行时,页面会用一个很明显的二次渲染。
在服务器端来做判断
其实现原理:在服务器生成页面时,检测文章中是否插入了代码(检测pre标签是不存在)。若插入了代码,就在网页的footer部分插入相应的prettify.js和CSS。若你的wordpress主题中包含了jQuery库的话,你可以把以下代码放到主题文件的functions.php文件中。


add_filter('wp_footer','add_prettify');
function add_prettify(){
    //定义全局post
    global $post;
    //正则匹配pre开始标签
    preg_match_all('|(<pre)|i', $post->post_content, $matches);
    if(is_single() && !empty($matches[0])) {
        //如果存在pre标签时,就把以下代码加入到footer之中
    ?>
        <link rel="stylesheet" id="is-load-css" href="sons-of-obsidian.css"/>
        <script src="js/run_prettify.js"></script>
        <script>
            jQuery('document').ready(function(){
                jQuery('.post pre').addClass('prettyprint linenums');
                window.prettyPrint && prettyPrint();
            });
        </script>
    <?php
    }
}

不出现水平滚动条的解决方案
如果你按照上面一步步的做了,却发现存在问题。比如说一行的代码太长的话,不会自动换行,不换行也认了吧!你还不现出滚动条。这样也太不好吧!所以上面将着手解决一下。

缘自何处

如果你对块级元素宽度继承很熟悉的话,你应该就会很清楚了。以下是贴出有问题代码结构:


<div class="post">
    <p>这是是文章的第一个段落</p>
    <pre class="prettyprint linenums">
        //这里面放的是相应的代码