一、code-prettify介绍
- prettify.js是Google的一款代码高亮JS库。
- 他又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等语言。
- GitHub地址： https://github.com/google/code-prettify
- CDN地址：http://www.bootcdn.cn/prettify/
二、如何在wordpress中使用
首先上GitHub下载最新的 google-code-prettify： https://github.com/google/code-prettify.git
安装方法一：
1. 从压缩包中提取 pretty.css 和 pretty.js 两个文件放置到主题根目录下。
2. 在 <head> 标签中引入 pretty.css 文件：
<link href="<?php bloginfo('template_directory'); ?>/prettify.css" type="text/css" rel="stylesheet" />3. 在 </body> 标签前面加入以下代码：
<script type="text/javascript" src="<?php echo home_url(''); ?>/wp-includes/js/jquery/jquery.js"></script>如果主题已经引入 jquery.js，上一行可以删除。
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/prettify.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("pre").addClass("prettyprint linenums");
prettyPrint();
});
</script>以上代码是给所有的 <pre> 标签添加 prettyprint linenums 类，linenums 表示显示行数 。然后 prettyPrint 来分析代码并上色。
安装方法二：
可直接在 <head> 中加入：
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>或者在压缩包中提取 run_prettify.js 放到主题根目录，然后在 <head> 中加入：
<script src="<?php bloginfo('template_directory'); ?>/run_prettify.js"></script>使用方法：
写文章时用 ,多行使用pre标签，单行可以使用code标签包围代码代码块，就可以看到上色的效果了，效果见本文。
三、更多使用事项
在GitHub的官方代码库中，有多套漂亮主题可供使用，详情在Github项目仓库主页有详细说明。
在wordpress中可以将js库在文章页中引入，使用is_single()函数做判断。在没有代码的文章不需要加载js库，优化文章打开速度。
可以留言共同交流。
四、参考文章
- https://code.google.com/archive/p/google-code-prettify/wikis/GettingStarted.wiki
- https://www.imjeff.cn/blog/71/
除非注明，否则均为日常生活博客原创文章，转载必须以链接形式标明本文链接
感谢分享
不错，过来支持一下