html js代码高亮插件下载_google code prettify代码高亮显示

由于我的博客里面分享在大部分是代码类的文章、难免会在文章中插入中很多代码、这个时候就需要使用高亮来体现代码的可读性、就像在IDE里面编程一样、这时分享我博客使用的方式、那就是使用 google-code-prettify 来实现的

google-code-prettify可以用来很方便地对网页中的程序代码进行高亮显示、从而在视觉上使得网页上的代码看得比较舒服、这对网站站长来说是很重要的、下面给大家介绍一下google-code-prettify 的使用方法与步骤、希望对大家有用

1、下载google-code-prettify

从 https://code.google.com/p/google-code-prettify/downloads/list 打包下载pretty.css以及pretty.js、并保存到本地服务器的相应目录中来引用、大家都知道由于天朝的原因、应该是不能访问的、如果想*自己访问的、可以参考我的另外一篇文章Google无法访问访问慢的解决方法、你也可以直接下载我上传的 google-code-prettify、也就下载我使用的版本

google-code-prettify下载地址：http://dwtedx.com/download.html?bdkey=s/1c08TSAW 密码: dpr4

2、引用pretty.css以及pretty.js

<link href="你保存的目录/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="你保存的目录/prettify.js"></script>

3、将源代码用标签包裹起来

将你需要高亮显示的代码片断放在<pre>标记里、如下

<preclass="prettyprint">

    你的代码片断

</pre>

4、jQuery使用小技巧实现优化

上述方法可以实现代码的高亮、但每次手动为<pre>标签添加class "prettyprint"、显示有些麻烦、使用下边的代码片断来解决这个问题并替换掉 body 的"onload"的事件

$(function(){
	$("pre").addClass("prettyprint");
	prettyPrint();
});

另外、这里要说明的是、如果不引入prettify.css 也是可以的、因为在prettify.js 里面有js帮我们引用的、但是服务器是google的服务器、可能在国内无法访问、那么这个时候我们就要改到自己的服务器了、修改方法也很简单的

若资源对你有帮助、扫描下方的二维码、关注DD博客微信公众号（ddblogs）吧

最后给贴上Demo的源代码、希望对大家有用、有兴趣的哥们可以下载看看

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1i33t9x7 密码: f3iu