html js代码高亮插件下载_google code prettify代码高亮显示
2015-07-27 21:27:11  By: dwtedx

由于我的博客里面分享在大部分是代码类的文章、难免会在文章中插入中很多代码、这个时候就需要使用高亮来体现代码的可读性、就像在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

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+