`

Google Code Prettify 实现代码高亮

前端web框架UIJQUERY 
阅读更多

今天有人私聊时问到网站代码高亮是怎么实现的？我简单回答了下用的是 Google code prettify。一会他又说https://code.google.com/p/google-code-prettify/打不开，我回答 Google 现在的服务都被屏蔽了，红杏科学上网自己斟酌，我也是免费用着别人开通时赠送的^_^，几乎每天都有人开通VIP，悲哀。

 

prettify 非常小巧且配置简单，使用它来实现代码的高亮显示是个不错的选择，好人做到底，我下载了最新的 google code prettify。下边我们简单看看 prettify.js 的使用方法.精心开发5年的UI前端框架！

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

.代码 
  1. <script src="http://libs.baidu.com/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>  
  2. <script src="http://www.jquery001.com/js/prettify.js" type="text/javascript"></script>  

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

在 body 标签上添加调用方法，如下：

.代码 
  1. <body onload="prettyPrint()">  
  2. </body>  

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

.代码 
  1. <pre class="prettyprint">  
  2.     @*你的代码片断*@  
  3. </pre>  

 使用 jQuery 小技巧实现优化

上述方法可以实现代码的高亮，但每次手动为<pre>标签添加"prettyprint"类，显示有些麻烦。使用下边的代码片断来解决这个问题并替换掉 body 的"onload"的事件，实现分离： 精心开发5年的UI前端框架！

.代码 
  1. <span style="color: #000000;">$(window).load(function(){  
  2.      $("pre").addClass("prettyprint");  
  3.      prettyPrint();  
  4. })</span>  

 到这我们应该已经成功使用 prettify.js 实现了代码的高亮显示，当然代码的配色大家可以自己来定，网上也有不少的配色方案。为了提高页面加载速度，我们应该将引用的 js 文件放置在底部，大家可以参考下本站的放置方法。

0
顶
0
踩
分享到：
| 关于CSS细节集合(三)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics