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

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

prettify.js 是 Google 的一款代码高亮插件，由 js 代码和 css 代码构成，用来高亮显示 HTML 页面中的源代码。支持：C, Java, Python, Bash, HTML, XML, Javascript, Makefiles, Ruby, PHP, Awk, Perl, Basic, Clojure, CSS, Dart, Erlang, Go, Haskell, Lisp, Scheme, LLVM, Lua, Matlab, Pascal, R, Scala, SQL, LaTeX 等语言。

Git 地址： https://github.com/google/code-prettify

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

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

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

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

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

在下方添加以下代码

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

保存后即可。

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

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

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

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

小结

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

以上就是如何通过prettify.javascript来如何实现代码自动高亮功能?。爱的艺术就像风筝，只有给它风一般的自由，你才会看到它飞舞在蓝天的景致。更多关于如何通过prettify.javascript来如何实现代码自动高亮功能?请关注haodaima.com其它相关文章！