技术类的博客，不来点代码高亮总觉得逼格不够。下面就说说如何加入这个功能吧，所有主题通用（其他类型网页也可以举一反三，方法都是类似的）。
准备
按照效率来说，使用PHP的方案自然是最好的。但鉴于使用PHP会造成需要修改的地方比较多比较麻烦，所以就不考虑了。这次就用一个比较常见JavaScript库来解决——highlight.js。这个库简单易用，而且自带很多种样式选择，总有一种适合你。
选择样式
这里有很多种预设样式可以选择。左边的Language categories就是选择语言的分类，Styles就是选择样式，右边就可以查看效果。确定好要使用的样式之后，到这里找到对应的css文件，点开后把代码复制下来保存到主题目录就行了。比如我就保存到主题下的css/highlight.css文件中。
然后就要把样式引入主题中，最简单的方法就是修改主题的头部文件header.php（视主题而定，一般是这个文件）的</head>前添加这样一行：
<link rel="stylesheet" href="<?php echo esc_url( get_template_directory_uri() ); ?>/css/highlight.css">
<?php echo esc_url( get_template_directory_uri() ); ?>是输出当前主题的网络路径。可以根据需要修改。
关于CDN
highlight.js我们可以通过网上的CDN来引入，也可以放到自己的网站上。比如使用百度的CDN，就上百度静态资源公共库搜索hightlight，然后就会得到结果了。如果放到自己的网站上，你就得考虑相对路径、绝对路径等等，这里不做讨论（有问题请留言）。下面会以path/to/highlight.js来统一指代。
题外话：关于HTTPS和HTTP的引用
有的网站既有HTTP访问又有HTTPS访问，这时网页中的资源引用就会出现问题。如果从HTTPS页面引用HTTP的资源就会被浏览器拒绝。
这时可以使用一种无协议的引用方式，当然前提是被引用资源要两种都能访问。比如：
<script src="//example.com/code.js"></script>
这样在HTTP页面上，浏览器就会引用http://example.com/code.js，在HTTPS页面上就会引用https://example.com/code.js。对于CSS也可以使用这种方式引用。
最简单的方法：让highlight自动处理
这种方法是让highlight自动处理相关的代码块，只要在主题脚部文件footer.php（视主题而定，一般是这个文件）的</body>前加入如下代码：
<script src="path/to/highlight.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
第一行是引用highlight.js的文件，第二行是执行初始化。
highlight.js会自动寻找结构为<pre><code>...</code></pre>的代码块，并自动判断语言。也可以通过<code>元素的类来指定语言或者不要高亮。支持的语言名称和别名可以在这里查到（右边那一列就是）。语言前也可以加上language-或者lang-。不要高亮则设置为nohighlight。比如：
<pre><code class="php">PHP代码</code></pre>
<pre><code class="lang-html">HTML代码</code></pre>
<pre><code class="language-js">JavaScript代码</code></pre>
<pro><code class="nohighlight">不要高亮</code></pre>
如果装过之前介绍的Markdown插件的，还可以更方便。可以用三个或更多`来代表代码块，并在后面加上直接加上类名。比如：
```php
PHP代码
```
```language-html
HTML代码
```
```lang-js
JS代码
```
```nohighlight
不要高亮
```
高级方法：无法保证代码块的结构时，或是代码块动态生成时
上面的方法要求代码块的结构是<pre><code>...</code></pre>这样的，如果不能保证这样的结构我们就需要额外的处理了。另外，如果代码块是动态加载的，也需要额外处理。
加载JS的代码是一样的，只不过不用初始化了：
<script src="path/to/highlight.js"></script>
我们要把元素传递给highlight.js的hljs.highlightBlock接口处理，这个接口接受一个参数，就是需要处理的DOM元素。和上面类似，我们可以用类属性来指定语言种类。
如果代码不是在pre或者设置过CSS属性white-space保留换行的元素之中的话我们需要用<br>元素来换行。这种情况我们要先设置一下让highlight使用<br>来换行（以下为JavaScript代码，需要放到<script>元素中，或者放到外部文件中通过<script>元素的src属性引用）：
hljs.configure({useBR: true});
然后我们就要选择所有的包含代码的元素然后传递给highlight.js处理。比如我们的代码块结构是<div><code>...</code></div>这样的，那么就要用如下代码：
code_elms = document.querySelectorAll('div code');
// code_elms = Array.prototype.slice.call(code_elms);
for(var i=0; i <= code_elms.length; i++) {
code_elm = code_elms[i];
hljs.highlightBlock(code_elm);
}
document.querySelectorAll是受到主流浏览器的支持的通过类CSS选择器来选择元素的接口，和jQuery的选择器很类似，返回的是一个类数组对象。但实际上并不是数组，其中的成员会随着DOM的变化而变化，所以如果页面上的元素会动态发生变化，最好取消第二行的注释以将其转换为真正的数组。
如果对ECMAScript6感兴趣，那么这个还可以更简化
Array.from( document.querySelectorAll('div code') ).forEach( code => hljs.highlightBlock(code) );
这里用到了ES6的Array.from来转换为数组元素，然后用forEach方法来遍历每个成员。然后用箭头函数来定义了forEach的回调函数。鉴于浏览器支持的原因，不建议这样使用。
还可以用jQuery，这个在highlight.js的官网上就给出例子了：
$('div.code').each(function(i, block) {
hljs.highlightBlock(block);
});
高级方法：使用Web Workers
什么是Web Workers，简单点说就是在后台执行JavaScript代码的。使用Web Worker可以避免在执行耗时代码时当前页面假死。highlight.js在处理量非常大的代码时有可能会假死，所以放到Web Workers中执行是很好的解决方法。
使用Web Workers就不需要在页面中引用highlight.js，我们将在Worker中引用。
首先我们需要修改header.php文件，在</head>之前加入：
<script>
addEventListener('load', function() {
var codes = document.querySelectorAll('pre code');
if(codes.length > 0) {
for(var i=0; i<codes.length;i++) {
var code=codes[i];
var msg = {
lang: Array.prototype.slice.call(code.classList),
content: code.textContent
};
var worker = new Worker('<?php echo esc_url( get_template_directory_uri() ) ?>/js/highlight-worker.js');
worker.onmessage = function(c) {
return function(event) { c.innerHTML = event.data; }
}(code);
worker.postMessage(msg);
}
}
});
</script>
第10行中因为我们引用了外部文件，所以用<?php echo esc_url( get_template_directory_uri() ) ?>输出了主题目录的网络路径。这段代码的意思就是，在窗口的load事件上绑定了行为：选择所有符合pre code选择器的元素，然后遍历每一个元素，把元素的内容和类属性通过msg对象传递给Worker，然后把Worker返回的数据替换元素的内容。Worker是使用一个叫做highlight-worker.js的文件建立的。
根据上面的代码可以看出，highlight-worker.js我放到了主题目录下的js/highlight-worker.js，其内容如下：
onmessage = function(event) {
importScripts('path/to/highlight.js');
var result = event.data.lang.length==0 ? self.hljs.highlightAuto(event.data.content) : self.hljs.highlightAuto(event.data.content, event.data.lang);
postMessage(result.value);
}
这段代码是在Worker的message事件上绑定行为：先导入highlight.js文件，然后根据传入的数据（也就是前面的msg对象）的lang属性的有无，调用hljs.highlightAuto接口来处理传入的数据的content属性（也就是代码内容）。然后把处理结果返回。
这样就行了。
最后
如果想查看highlight.js的完整API列表，可以到这里。还可以研究一下自己修改样式。虽然这个方案并不是最佳的，比如效率问题，比如高亮还是不如一些代码编辑器，比如不会加行号等等，但对于代码的可读性已经是很不错的提升了，更复杂的功能以后再研究吧。