因为本站要分享很多代码，所以在页面上实现代码高亮是必须的，在WordPress官方找了很多插件，都是要加载额外的css和js到网页头部，对我这种优化控来说，这是不能接受的，搜索了很多地方，最后找到了我爱水煮鱼介绍的Prism：轻量级的 Javascript 代码高亮库，当时Prism支持的语言还比较少，文件压缩后只有1.5k，发展到了现在，Prism支持的语言包括html、js、css、php、python等十几种语言。

集成Prism到网站

使用的时候，在官网选择需要的语言和代码高亮的主题，然后下载到本地，然后解压，把解压出来的js和css文件引入到网页的head中。为了减少两个http请求，我当然是直接把js和css和网站其他的合并在一起。然后，需要代码高亮的时候，直接用类似于下面的代码把需要高亮的代码包裹起来就可以了。

<pre><code class="language-css">p { color: red }</code></pre>

等等，使用起来好像有点麻烦，还有输入那么多东西，就不能再简单一点吗？答案是当然可以。我们可以用WordPress的Qtag API为文本编辑器添加一个快捷输入按钮，具体是这样的。

function mxthemes_add_quicktags() { ?>
<script type="text/javascript">
QTags.addButton( 'Prism', 'Prism', '\n<pre><code class="language-php">', '</code></pre>\n' ); //快捷输入[Prism]标签
</script>
<?php }
add_action('admin_print_footer_scripts', 'mxthemes_add_quicktags' );

我平时需要高亮的php语言比较多，所以只添加了一个php，按钮名称为Prism（为了感谢开发者），如果你还需要高亮其他语言，请自行添加快捷输入按钮。

使用小技巧

需要注意的是：Qtags快捷输入按钮需要在文本编辑模式下使用，直接粘贴代码到这里可能会被WordPress自动过滤掉。直接在可视化编辑模式下粘贴代码，WordPress会自动把代码里面的符号转义，这时候再切换到文本编辑模式下，选中刚才粘贴的代码，然后狠狠的点一下Prism按钮就可以了。