WP粉丝网「WordPress技巧」wordpress网站安装谷歌 google-code-prettify实现代码高亮功能
现在很多WordPress主题都会集成到代码高亮功能，但是博主最近用的知更鸟主题的那个代码高亮功能通过人工转换后实现，使用起来不是很方便。发现很多站点都在用谷歌 google-code-prettify实现代码高亮，于是也想着来折腾下，在网上找到“「WordPress技巧」wordpress网站安装谷歌 google-code-prettify实现代码高亮功能”这个教程，现在给大家分享记录下。
一、谷歌 google-code-prettify介绍
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
二、实现 google-code-prettify代码自动高亮步骤
1、点击下载 prettify.zip 压缩包，解压后活得 prettify.js 和 prettify.css 文件。
下载后解压包里主要的两个文件， pretty.css 和 pretty.js我们要在主题下面把它引入到我们的主题，把解压后的google-code-prettify 文件夹放在你的主题的根目录下，不是网站根目录，是这样滴 \wp-content\themes\主题文件夹\google-code-prettify\，当然你也可以直接放在主题根目录下面，这主要影响你下面的文件引入路径，这不是主要的。
2、在主题的header.php文件的在< head> 标签中引入 pretty.css 文件：
<link href="<?php bloginfo('template_directory'); ?>/google-code-prettify/prettify.css" type="text/css" rel="stylesheet" />
3、在主题的header.php文件的在< head> 标签中引入 prettify.js文件：
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/google-code-prettify/prettify.js"></script>
4、 在主题的header.php文件的在< head> 标签中引入 jquery.js文件,因为要依赖于jquery。如果当前主题已经引入了jquery.js这一步不用管，主题基本上都已经引入了的。
<script type="text/javascript" src="<?php echo home_url(''); ?>/wp-includes/js/jquery/jquery.js"></script>
5、初始化prettify，这一步也不用管，已经集成到了prettify.js中了，只是记录一下。
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("pre").addClass("prettyprint linenums");
prettyPrint();
});
</script>
三、编辑文章时添加代码的方法
在编辑文章的时候，在需要插入代码的地方直接粘贴代码，然后选择所粘贴的代码之后点击编辑器中的格式 >> 块 >> pre，具体如下图所示：
最后我们发布或更新文章即可实现刚才所添加的代码自动高亮显示了。实际效果就如本文的代码高亮功能一样。
至此，关于“「WordPress技巧」wordpress网站安装谷歌 google-code-prettify实现代码高亮功能”实现方法就分享结束了，有需要的小伙伴们自己折腾去吧，欢迎留言交流。
整理自：
https://www.yigujin.cn/1775.html
http://www.511yj.com/google-code-prettify.html
