JavaScript

语法高亮着色器prettify.js

时间:2017-5-25 23:10:31  作者:WPF之家  来源:http://www.wpf123.com/  查看:580  评论:0
内容摘要:prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,最值得亮点的地方是不需要指明代码的语言类型,它会自动进行判断。prettify 非常小巧且配置简单,使用它来实现代码的高亮显示是个不错的选择。下边我们简单看看 ...

prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,最值得亮点的地方是不需要指明代码的语言类型,它会自动进行判断。


prettify 非常小巧且配置简单,使用它来实现代码的高亮显示是个不错的选择。下边我们简单看看 prettify.js 的使用方法:

1.引入 jQuery 文件和 prettify.js 文件

<scripttype="text/javascript"src="jquery-1.6.1.min.js"></script> <scriptsrc="prettify.js"type="text/javascript"></script>

2.调用 prettify.js 实现代码高亮

在 body 标签上添加调用方法,如下:

<bodyonload="prettyPrint()"> </body>

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

<preclass="prettyprint">     @*你的代码片断*@</pre>

使用 jQuery 小技巧实现优化

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

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

到这我们应该已经成功使用 prettify.js 实现了代码的高亮显示,为了提高页面加载速度,我们应该将引用的 js 文件放置在底部

下载地址:http://code.google.com/p/google-code-prettify/


标签:语法 高亮 着色 prettify.js 

原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。本文出自“wpf之家”,请务必保留此出处:http://www.wpf123.com

上一篇:没有了
下一篇:Json 介绍
相关评论
Copyright © 2009-2014 WPF之家(http://www.wpf123.com/) All rights reserved
 Powered by WPF之家
鄂ICP备13006396号