Prism为WordPress添加代码高亮功能

前言

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

只需要在网页头部引入它的 prism.js 和 prism.css 文件，就能美化网页中用 包裹起来的代码块。

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

下载 prism 的 JS 文件和样式表

打开Prism 项目官网（https://prismjs.com/），点击 Download 按钮。在打开页面中进行简单配置，如下：

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

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

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

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

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

最后分别点击两颗下载按钮，把 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 函数来让主题更加符合官方标准。

如果你将两个文件放到主题根目录，需要把上方代码中的 /… 删除；如果你有良好的习惯，应该把 js 和 css 文件放到不同的子目录中，那么要把 … 改成相应的目录。比如
/js/prism.js 和 /css/prism.css。

使用

现在，只需要将代码放到 <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 );

在写这篇文章时还发现一个问题，如果在 <code>…</code> 中间，再次使用了 <pre><code> 的话，转义会有问题。暂时的解决方法是把再次使用的 <pre><code> 进行手动转义，即把< 写成<，把 > 写成 > 。

flag：有空的话再优化一下正则吧。

结语

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

还是非常容易设置的。