日拱一卒无有尽,功不唐捐终入海

使用 Google-Code-Prettify 实现代码高亮功能

JavaScript Sam 709℃ 0评论

使用 Google Prettify 实现代码高亮

今天这篇文章主要讲述使用 google-code-prettify 来实现代码的高亮显示,prettify 非常小巧且配置简单,使用它来实现代码的高亮显示是个不错的选择。

下边我们简单看看 prettify.js 的使用方法:

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

2.调用 prettify.js 实现代码高亮
在 body 标签上添加调用方法,如下:

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

使用jQuery小技巧实现优化

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

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

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

转载请注明:PHP笔记 » 使用 Google-Code-Prettify 实现代码高亮功能

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)