作为一个程序员，很多的站长做网站都想着，希望自己的网站内容代码能够高亮显示，让用户看起来显得比较高端大气上档次。下面，小千就教大家利用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等语言。
Github仓库文件地址：https://github.com/googlearchive/code-prettify
二、如何安装
安装方法很简单，我们直接引用到当前站点，任何CMS的头部即可。
<link type="text/css" rel="stylesheet" href="prettify.css"> <script type="text/javascript" src="prettify.js"></script>
这里我们引用到页面。
然后在html 的body标签中添加一个onload事件 οnlοad="prettyPrint()"，如果你加载了JQuery，则可以添加以下代码。
$(document).ready(function(){
prettyPrint();
})我们使用的时候，直接用pre闭合HTML引用即可。
三、举个例子
一个简单的HTML网页，只要是内容中包含<pre>代码</pre>标签的，都能自动高亮。
<!DOCTYPE html>
<html>
<!--STATUS OK-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta content="webkit|ie-comp|ie-stand" name="renderer" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- saved from url=(0013)about:internet -->
<title>代码高亮</title>
<link type="text/css" rel="stylesheet" href="./prettify.css">
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./prettify.js"></script>
</head>
<body>
<!-- 文章内容 -->
<div class="single-content">
<pre>function mubandir($dir) {
if (is_dir($dir) && is_readable($dir)) {
$handle = opendir($dir);
$f_dir = array();
while (($f_name = readdir($handle)) != false) {
if (is_dir($dir . '/' . $f_name) && $f_name != "." && $f_name != "..") {
$f_dir[] = $f_name;
}
}
closedir($handle);
return $f_dir;
} else {
return false;
}
}</pre>
</div>
</body>
</html>用过百度编辑器代码高亮的小伙们，你会发现，这个谷歌高亮代码，比百度高亮代码的代码，还要少，还要小巧很多很多，从加载的角度来讲，这个谷歌高亮代码加载缺少快。
四、懒人包下载
总结：如果，你还在找代码高亮插件，这个谷歌Pretiffy.js高亮代码插件，搭建简单，本站就在用，是一个不错的选择。只要一个js就行，而且，这个js的大小，只有15k而已，已经精简到最精简版了。追求完美的人，就应该选择这种轻便的代码高亮插件。
本文结束
评论专区
上一篇
发表评论
评论列表（无评论）