如何通过prettify.js来实现代码自动高亮功能?

这段时间发现很多站点都是通过 prettify.js 来实现代码自动高亮，而且操作也很简单，无需区分是 HTML 代码还是 PHP 代码或 SQL 代码或其他代码，prettify.js 都会自动识别并高亮显示。

大家可以自行访问上面的 Git 地址获取代码文件，并可以根据其介绍的办法自行折腾。今天懿古今就简单介绍我现在使用的代码高亮方法，也是通过 prettify.js 来实现的，这里以Nana 主题为例进行说明。

实现 prettify.js 代码自动高亮步骤

1、点击下载 prettify.zip 压缩包，解压后活得 prettify.js 和 prettify.css 文件。

2、将 js 和 prettify.css 文件添加到主题文件中，如 Nana/js 文件夹内，然后编辑 header.php 文件，找到以下代码

1. <script type="text/javascript" src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/jquery-1.12.4.min.js"></script>

在下方添加以下代码

1. <script type="text/javascript" src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/prettify.js"></script>
2. <link rel='stylesheet' id='prettify-css' href='<?php echo esc_url( get_template_directory_uri() ); ?>/js/prettify.css' type='text/css' media='all' />

保存后即可。

编辑文章时添加代码的方法

在编辑文章的时候，在需要插入代码的地方直接粘贴代码，然后选择所粘贴的代码之后点击编辑器中的格式 >> 块 >> pre，具体如下图所示：

之后代码就会变成“预格式化”，具体如下图所示：

最后我们发布或更新文章即可实现刚才所添加的代码自动高亮显示。具体效果如下：

小结

其实这个实现和使用方法还是比较简单的，在这里要特别感谢雅兮网博主，如果不是雅兮网博主提醒如何正确添加代码，我可能还在原地踏步折腾中。对于有需要的博主可以根据本文自行添加到相应的主题中，应该不单单适用于懿古今主题，应该也同样适用于其他 WordPress 主题，甚至 zblog 主题等（如果发现本文代码高亮异常，请强制刷新本页面即可具体的效果）。