探索建站和运维乐趣

利用轻便的Pretiffy.js实现内容代码高亮效果

如果我们在使用常规的CMS程序希望代码高亮可以选择内置的高亮代码插件实现。但是有些CMS程序或者我们自建的主题中没有自带高亮插件的,我们或者希望高亮效果不要搞这么复杂,可以使用来自谷歌的Pretiffy.js实现内容的高亮效果。

第一、Pretiffy.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等语言。

文件地址:https://github.com/googlearchive/code-prettify

第二、如何安装

安装方法很简单,我们直接引用到当前站点,任何CMS的头部即可。


<link href= "prettify.css"  type= "text/css"  rel= "stylesheet"  />
<script type= "text/javascript"  src= "prettify.js" ></script>

这里我们引用到页面。

然后在html 的body标签中添加一个onload事件 οnlοad="prettyPrint()",如果你加载了JQuery,则可以添加以下代码。


$(document).ready(function(){
      prettyPrint();
})  

我们使用的时候,直接用pre闭合HTML引用即可。

文件下载地址:

赞(2)
转载保留:老部落 » 利用轻便的Pretiffy.js实现内容代码高亮效果


关注公众号『老蒋朋友圈』

获取更多建站运营运维新知!
互联网创业、前沿技术......