推荐一个代码高亮的js库,Google Code Prettify

By | 2020年02月29日

一、code-prettify介绍

  1. prettify.js是Google的一款代码高亮JS库。
  2. 他又js代码和css代码构成,用来高亮显示HTML页面中的源代码。
  3. 支持: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等语言。
  4. GitHub地址: https://github.com/google/code-prettify
  5. 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://www.mezgy.com/575.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

有人回复时邮件通知我