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

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

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

google-code-prettify 提供了 5 个 css 主题可供选择,而且支持自定义 style。相关的 demo 及 style 文件参见:Gallery of themes for code prettify

大家可以自行访问上面的 Git 地址获取代码文件,并可以根据其介绍的办法自行折腾。

今天我们就介绍下通过 prettify.js 来实现代码高亮的简便方法,这里以Nana 主题为例进行说明。

p { color: red }

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

1、google-code-prettify 需要两个文件,prettify.js 和 prettify.css,去官网下载。
2、将 js 和 prettify.css 文件添加到主题文件中,如 Nana\js 文件夹内,然后编辑 header.php 文件,找到以下代码
在下方添加以下代码
保存后即可。

温馨提示:这个 prettify.css 文件中的代码其实我们可以直接添加到主题的 style.css 文件的。

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

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

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

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

其实这个实现和使用方法还是比较简单的,对于有需要的博主可以根据本文自行添加到相应的主题中,应该不单单适用于本例主题,应该也同样适用于其他 WordPress 主题,甚至 zblog 主题等(如果发现本文代码高亮异常,请强制刷新本页面即可具体的效果)。

推荐阅读:

admin

大家好!欢迎光临我的个人博客,本博主要是学习和记录自己生活、学习中发生的点点滴滴的过程,很高兴可以把自己的废话和一点点的经验拿出来和网友分享,最大的愿望就是能构共同学习,共同进步。

发表评论

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

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据