利用Google Code Prettify纯代码实现WordPress代码高亮

WordPress最吸引人的地方就是在于有很多现成的插件可以使用，但是插件过多的话容易拖慢网站，因此动手能力强的话可以使用纯代码方式实现一些功能，例如代码高亮。

代码高亮的方案有很多种，例如Prism、Google Code Prettify，实现原理其实都是一样的，都是将代码高亮的JS与CSS引用到主题当中进行使用，这里以Google Code Prettify为例。

下载js和css文件

可以自行寻找地址下载，这里给出两个示例地址

• JS 地址：https://cdn.bootcdn.net/ajax/libs/prettify/r298/prettify.js
• CSS 地址：https://cdn.bootcdn.net/ajax/libs/prettify/r298/prettify.css

修改 functions.php 文件

打开 WordPress 主题文件中的 functions.php 文件，在末尾 ?> 前添加如下代码。第一步下载 js 文件保存在当前主题下的js目录。

function dangopress_esc_html($content) {
    $regex = '/(<pre\s+[^>]*?class\s*?=\s*?[",\'].*?prettyprint.*?[",\'].*?>)(.*?)(<\/pre>)/sim';
    return preg_replace_callback($regex, dangopress_esc_callback, $content);
}
function dangopress_esc_callback($matches) {
    $tag_open = $matches[1];
    $content = $matches[2];
    $tag_close = $matches[3];
 
    //$content = htmlspecialchars($content, ENT_NOQUOTES, get_bloginfo('charset'));
    $content = esc_html($content);
 
    return $tag_open . $content . $tag_close;
}
function setup_load_script() {
    // Register prettify.js
    wp_enqueue_script('prettify-js', get_template_directory_uri().'/js/prettify/prettify.min.js',
                       array(), '20130504', true);
}
function wp_prettify_load() {
    if ( is_single() ) {
        add_filter('the_content', 'dangopress_esc_html', 2);
        add_filter('comment_text', 'dangopress_esc_html', 2);
        add_action('wp_enqueue_scripts', 'setup_load_script');
    }
}
add_action( 'wp', 'wp_prettify_load' );

修改header.php文件

打开 WordPress 主题文件中的 header.php 文件，在 </head> 标签前添加如下代码，用来加载主题样式，也只在文章页加载。

<?php if ( is_single() ) { ?><link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri().'/css/prettify-default.css' ;?>" />

使用

在需要代码高亮的地方，为代码添加<pre>标签，并声明引用的code的语言，例如：

<pre><code class="language-markup">...</cope></pre>

(还没有评分)

Loading...