前言

WordPress 有很多插件可以实现代码高亮的功能，但因为我是使用自带的 HTML 编辑器来码字的，而大部分插件都只集成到可视化编辑器中，使用起来很麻烦。

还有一些可以用短代码标记的，却又太臃肿；更有一些年久失修，早已不更新了。换了很多插件，最后对官方插件彻底失望，只能另觅他法。

代码高亮

最终我选择了Prism Highlight，它可以集成到任何网站代码中，不只是 WordPress 能用。

只需要在网页头部引入它的prism.js和prism.css文件，就能美化网页中用<code class="language-xxx">包裹起来的代码块。

并且它还有小巧、可自定义、支持市面上大多数语言、多种高亮色彩主题、HTML5 标准语法等优点。

下面我们来看看如何把 Prism 集成到 WordPress 主题中吧。

下载 prism 的 JS 文件和样式表

打开Prism 项目官网，点击Download按钮。在打开页面中进行简单配置，如下：

下载Prism前进行简单配置

如果希望进行二次开发或自定义，就下载开发者版本，否则压缩版更加轻便。

然后选择你喜欢的代码高亮主题，在页面底部可以预览。

下载Prism选择你需要支持的语言

接下来是需要支持的语言。全选的话大约 500KB，不过没必要，只需要选择常用的就可以了。

我选择了包括命令行、配置文件、常见的计算机编程和 Web 编程语言，大约 30 多种吧，也不到 100KB。

下载Prism前选择扩展

扩展我只选择了显示行号，其它的没有深入研究。

下载Prism

最后分别点击两颗下载按钮，把Prism.js和Prism.css两个文件下载到电脑中。

安装 Prism

将Prism.js和Prism.css两个文件上传到 WordPress 主题目录中，然后在header.php中将其引入：

<script src="<?php bloginfo('template_url'); ?>/.../prism.js"></script>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/.../prism.css" />

也可以使用wp_enqueue_script()和wp_enqueue_style()两个 WP 函数来让主题更加符合官方标准。

使用

现在，只需要将代码放到<code class="language-xxx">和</code>之间，就能实现代码高亮了。(xxx改成代码所属的语言)

但为了更符合现代 Web 标准，块级代码应该再用<pre>将其包裹起来。因为<pre>会通知浏览器将其中的内容解析为代码块，使用等宽字体并且保留换行和空格符，使你的代码保留很好的缩进格式。比如这样：

<pre>
    <code class="language-markup">
        <!-- 代码 -->
    </code>
</pre>

如果只是在同一行字中出现的代码，只须直接使用<code>...</code>。

要显示行号，只要把line-numbers类加入到<code>的class中，如：

<code class="language-xxx line-numbers">...</code>

阻止 WordPress 自动更正

WordPress 有个自以为是的功能，它会将一些半角标点符号转换为全角字符，还会把英文引号"根据安装时所选择的语言和地区，转换成那个地区习惯用的引号。

这样会导致代码混乱，解决方法是在function.php中插入以下代码：

remove_filter('the_content', 'wptexturize');

Web 语言代码转义

做完前面的部分，贴其它编程语言的代码没有问题，但涉及的 Web 语言的代码或符号，比如HTML中的<>标记，就会被浏览器解析为HTML代码，不仅不会显示代码原文，而且还会因为运行了这段代码导致网页排版混乱。

这时我们就需要将代码进行特殊处理，将HTML代码转义为HTML实体符号。

WordPress 提供了esc_html()函数，我们可以利用它进行转义。将下面代码放入function.php中，就可以顺利贴入 Web 语言的代码了。

function art_esc_code ( $content ){
		$pattern = '/<code\s+?class=.*?>([\s\S]*?)<\/code>/i';
		preg_match_all( $pattern, $content, $matches, PREG_PATTERN_ORDER );
		foreach( $matches[1] as $string ){
			$replacement = esc_html( $string );
			$content = str_replace( $string, $replacement, $content );
		}
		return $content;
	}
	add_filter( 'the_content', 'art_esc_code', 1 );

结语

除了 WordPress，Prism 还可以用在其它任何网站程序中，大概流程无非就是：引入Prism.js和Prism.css → 配置好代码转义 → 用<pre><code>包裹代码即可实现代码高亮。

还是非常容易设置的。