现在的位置:首页>wordpress>正文

手动安装google-code-prettify实现wordpress代码高亮

2016年10月17日 ⁄ 共 2583字 评论 4 条

其实这个或能,说白了就是代码高亮,之前部落介绍过好几种实现的方法,但很多朋友说,google-code-prettify 是最棒的代码高亮插件,毕竟是谷歌官方也在使用的,当然,现在我们如果要安装谷歌的东西,肯定要小心,毕竟谷歌已经退出了中国,而且随时都有被屏蔽掉的可能。这里我们可以将google-code-prettify插件中的内容复制出来,从而实现代码高亮,也算是纯代码的方式来实现这个功能了。

google-code-prettify支持的高亮语言

在默认情况下支持的文件扩展名包括:bsh, c, cc, cpp, cs, csh, cyc, cv, htm, html,java, js, m, mxml, perl, pl, pm, py, rb, sh,xhtml, xml, xsl

也就是说,Google Code Prettify支持高亮的语言: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等等......语言。

目前已经有国人将其插件进行了改装,如果您需要这个插件,那么可以去部落的百度网盘上下载,地址是:由此直达。提取密码为:itbr

另外,如果直接使用下面方法中的文件修改的方法,可以直接下载相应的文件,下载地址是:由此直达。 提取密码为:kp76

好了,我们一起来看看具体的使用方法。

1.下载后解压包里主要的两个文件, pretty.css 和 pretty.js我们要在主题下面把它引入到我们的主题为了对多语言的支持,我们在 google-code-prettify 文件夹下面放了所有官方语言支持文件,你可以这样,把解压后的google-code-prettify 文件夹放在你的主题的根目录下,不是网站根目录,是这样滴 \wp-content\themes\主题文件夹\google-code-prettify\,当然你也可以直接放在主题根目录下面,这主要影响你下面的文件引入路径,这不是主要的。

2.引入文件

1、在主题的header.php文件的在< head> 标签中引入 pretty.css 文件:

  1. <link href="<?php bloginfo('template_directory'); ?>/google-code-prettify/prettify.css" type="text/css" rel="stylesheet" />

2、 在主题的header.php文件的在< head> 标签中引入 jquery.js文件,因为要依赖于jquery。

  1. <script type="text/javascript" src="<?php echo home_url(''); ?>/wp-includes/js/jquery/jquery.js"></script>

如果主题已经引入 jquery.js,上一行可以删除,WordPress都已经引入了jquery,其实是可以省略的。

3、 在主题的header.php文件的在< head> 标签中引入 prettify.js文件。

  1. <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/google-code-prettify/prettify.js"></script>

4、初始化prettify

  1. <script type="text/javascript">
  2.  jQuery(document).ready(function () {
  3.  jQuery("pre").addClass("prettyprint linenums");
  4.  prettyPrint();
  5.  });
  6.  </script>

3.补充说明:

1、我们为了代码执行效率,不主张以上引入方法,你可以参考 WordPress引入css/js两种方法

2、我们已经把初始化代码放到jquery.js文件的最后,所以第四步初始化就不需要了。

3、在初始化时,由于加入了 addClass所以你在引用时,比如每次需要插入代码的时候,我们只需要插入

你的代码

就可以。

4、也就是说,你只需要引入两个文件pretty.css,prettify.js

5、会自动识别你的语言,不要在设置语言格式,默认添加了行号。

4.集成到wordpress文本编辑器

将以下代码拷贝到主题的 functions.php 文件中:

  1. /*
  2. *添加pre到HTML编辑器自定义标签按钮 from www.mfbuluo.com
  3. */
  4. add_action('admin_print_footer_scripts','eg_quicktags');
  5. function eg_quicktags() {
  6. ?>
  7. <script type="text/javascript" charset="utf-8">
  8. QTags.addButton( 'eg_pre', 'pre', '<pre>代码代码代码\n</pre>', '', 'q' );
  9. </script>
  10. <?php
  11. }

使用时直接套用pre,效果如下图:

prettify1

css样式修改

你只需要换掉 google-code-prettify文件夹下的prettify.css样式表内容就可以了。这里在百度网盘提供了35个样式表供你选择.

正确使用后的效果如下图:

prettify2

好了,到此我们就完成了所有的操作。

 

 

小结

代码高亮这个功能,部落一直都是使用的代码方法,不过上面相关文章中的第一种方法,总体来看,还是相当不错的。google-code-prettify这样的方法,如果您是国外的博客,可以使用一下。当然,国内的话,用里面的文件来实现,也不错。

评论 4 条 评论内容很精采,有内幕,而且绝对有干货

  1. 香港云主机 2016年10月17日 14:42  @回复  Δ-49楼 回复

    实现wordpress代码高亮,好像可以用插件就可以实现,用插件实现比这种应该要快一些

  2. 洋得意自媒体博客 2016年10月18日 11:37  @回复  Δ-48楼 回复

    感谢分享

  3. 我爱动感单车网 2016年10月21日 13:34  @回复  Δ-47楼 回复

    我的博客已经安装了六七个插件,再增加负担就超负荷了。

  4. 德洛夏克 2016年11月26日 22:24  @回复  Δ-46楼 回复

    厉害了word哥, 很详细!谢谢分享!

给我留言