如何添加Prism.js到wordpress实现代码高亮

Prism是一个轻量级，可扩展的代码高亮显示JavaScript库！Prism.JS使用简单，支持自定义支持语言及主题样式，只需要引用CSS文件和JS文件即可。

1、引入Prism.css和Prism.js文件，添加以下代码到主题funcations.php中。

function add_prism() {
        wp_register_style(
            'prismCSS', 
            get_template_directory_uri() . '/css/prism.css' //根据使用的主题自定义路径
         );
          wp_register_script(
            'prismJS',
            get_template_directory_uri() . '/js/prism.js'   //根据使用的主题自定义路径
         );
        wp_enqueue_style('prismCSS');
        wp_enqueue_script('prismJS');
    }
add_action('wp_enqueue_scripts', 'add_prism');

2、在code或pre code标记中转义HTML。

function escapeHTML($arr) {
    if (version_compare(PHP_VERSION, '5.2.3') >= 0) {
        $output = htmlspecialchars($arr[2], ENT_NOQUOTES, get_bloginfo('charset'), false);
    }
    else {
        $specialChars = array(
            '&' => '&',
            '<' => '<',
            '>' => '>'
        );
        // decode already converted data
        $data = htmlspecialchars_decode($arr[2]);
        // escapse all data inside pre
        $output = strtr($data, $specialChars);
    }
    if (! empty($output)) {
        return  $arr[1] . $output . $arr[3];
    }   else    {
        return  $arr[1] . $arr[2] . $arr[3];
    }
}
function filterCode($data) { // Uncomment if you want to escape anything within a pre tag
    $modifiedData = preg_replace_callback('@(<pre.*>)(.*)(<\/pre>)@isU', 'escapeHTML', $data);
    $modifiedData = preg_replace_callback('@(<code.*>)(.*)(<\/code>)@isU', 'escapeHTML', $data);
    $modifiedData = preg_replace_callback('@(<tt.*>)(.*)(<\/tt>)@isU', 'escapeHTML', $modifiedData);
    return $modifiedData;
}
add_filter( 'content_save_pre', 'filterCode', 9 );
add_filter( 'excerpt_save_pre', 'filterCode', 9 );

完成以上步骤后，代码高亮功能就可以实现了。

3、使用方法：在文本编辑模式下插入代码即可

HTML代码：

<pre class="line-numbers  language-markup"><code class="language-markup">代码放这里</code></pre>

PHP代码：

<pre class="line-numbers  language-php"><code class="language-php">代码放这里</code></pre>

JavaScript代码：

<pre class="line-numbers  language-javascript"><code class="language-javascript">代码放这里</code></pre>

CSS代码：

<pre class="line-numbers  language-css"><code class="language-css">代码放这里</code></pre>

4、Prism.js下载（可自定义配置）
官方下载 参考文章