WordPress主题使用 Prism.js 实现代码高亮效果

Prism.js直达连接：https://prismjs.com/download.html

首先我们在主题目录下function.php中添加如下代码：

//Prism.js开始 
 function add_prism() {
        wp_register_style(
            'prismCSS', 
            get_stylesheet_directory_uri() . '/prism/prism.css' //自定义路径
         );
          wp_register_script(
            'prismJS',
            get_stylesheet_directory_uri() . '/prism/prism.js' //自定义路径
         );
        wp_enqueue_style('prismCSS');
        wp_enqueue_script('prismJS');
    }
add_action('wp_enqueue_scripts', 'add_prism');
//Prism.js结束

然后添加后台编辑器快捷按钮，同样在function.php总添加代码：

//自定义编辑器添加快捷键
<pre class="line-numbers"><code class="language-php">
//自定义编辑器添加快捷键
function appthemes_add_quicktags() {
?> 
<script type="text/javascript"> 
QTags.addButton( 'codeHighlight', 'HTML', 'n[pre class="line-numbers">[code class="language-markup"]n HTML代码n[/code][/pre]n' );
QTags.addButton( 'php', 'PHP', 'n[pre class="line-numbers">[code class="language-php"]n PHP代码n[/code][/pre]n' );
QTags.addButton( 'python', 'Python', 'n[pre class="line-numbers">[code class="language-python"]n Python代码n[/code][/pre]n' );
QTags.addButton( 'css', 'CSS', 'n[pre class="line-numbers">[code class="language-css"]n CSS代码n[/code][/pre]n' );
QTags.addButton( 'js', 'JavaScript', 'n[pre class="line-numbers">[code class="language-javascript"]n JavaScript代码n[/code][/pre]n' );
QTags.addButton( 'bash', 'bash', 'n[pre class="line-numbers"><code class="language-bash"]n Bash代码n[/code][/pre]n' );
</script>
<?php
}
add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );
//添加快捷键结束

修改[]为<>

最后保存一下，编辑文字点击编辑器上的按钮，就可以添加对应的片段，实现代码高亮了！