wordpress添加代码高亮显示

在用wordpress写博客时，平常需要在内容区域添加一些代码程序，但wordpress后台编辑文档中没有能够突出代码高亮显示的功能，这使得内容区域的文本内容与程序代码颜色一致，不能够重点突出代码程序，更不能达到用户体验的要求。

最近，看到一个国外的网站https://prismjs.com/，Prism是一个轻量级的、可扩展的语法亮点，它基于现代Web标准构建。它被用于数千个网站，包括一些你每天访问的网站。

通过点击最上面的download按钮，进入下载选择页面。它包括四个部分压缩水平(compression level),核心(core),语言(languages)，插件(plugins),经过四部分的操作，可以定制自己喜欢的高亮显示代码，最后的一个环节将调好的模板的js代码和css样式下载放到自己的网站中。
高亮代码显示的样式，如下图：

通过上面的图片可以看到显示的效果很漂亮，但是这种方法下面有个滚动条，隐藏的代码部分需要拖动出来。
下面介绍另一种，是我比较喜欢的一个方法，也是通css和js来实现的。

首先，在自己的模板中添加css样式，如下:

/*淡白灰代码高亮样式*/
pre {
    display: block;
    padding: 0 0 0 10px;
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 20px;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre;
    white-space: pre-wrap;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 2px
}
pre.prettyprint {
    margin-bottom: 20px;
    background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
    background-size: 3em 3em;
}
.prettyprint.linenums, pre.prettyprint.linenums {
    -webkit-box-shadow: inset 40px 0 0 #f8f8f8, inset 42px 0 0 #358ccb;;
    -moz-box-shadow: inset 40px 0 0 #f8f8f8, inset 42px 0 0 #358ccb;;
    box-shadow: inset 40px 0 0 #f8f8f8, inset 42px 0 0 #358ccb;
}
.prettyprint.linenums ol, pre.prettyprint.linenums ol {
    padding-left: 1.8em;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}
.prettyprint.linenums ol li, pre.prettyprint.linenums ol li {
    padding-left: 6px;
    color: #bebec5;
    line-height: 21px;
    margin-left:3px;
    list-style: decimal;
}
.prettyprint.linenums ol li:before, pre.prettyprint.linenums ol li:before {
    content: "";
    width: 0
}
.prettyprint .com {
    color: #666
}
.prettyprint .lit {
    color: #c0c
}
.prettyprint .clo, .prettyprint .opn, .prettyprint .pun {
    color: #0a0
}
.prettyprint .fun {
    color: #dc322f
}
.prettyprint .atv, .prettyprint .str {
    color: #c28f5b
}
.prettyprint .kwd, .prettyprint .tag {
    color: #f92659
}
.prettyprint .atn, .prettyprint .dec, .prettyprint .typ, .prettyprint .var {
    color: #0a0
}
.prettyprint .pln {
    color: #00f
}

其次，在header引用prettify.js代码

最后，在编辑器中添加高亮代码按钮，在function中加入

function prettify_codeHighlight() {
?>
<script type="text/javascript">
QTags.addButton( 'codeHighlight', '代码高亮', '<pres class="prettyprint linenums" >\n添加代码\n</pres>', "" );//添加高亮代码
</script>
<?php
}
add_action('admin_print_footer_scripts', 'prettify_codeHighlight' );

注:将上面的pres改成pre,因为pres是不存在的标签，问了避免与代码中的pre class=”prettyprint linenums冲突，我这里发布内容时故意写成这样的。