当前位置:jQuery学习 > jQuery > Google Code Prettify 实现代码高亮

Google Code Prettify 实现代码高亮

时间:2014-08-03QQ群:116983258

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

prettify 非常小巧且配置简单,使用它来实现代码的高亮显示是个不错的选择,好人做到底,我下载了最新的 google code prettify。下边我们简单看看 prettify.js 的使用方法

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

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

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

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

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

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

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

使用 jQuery 小技巧实现优化

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

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

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

作者:jQuery学习网
除非注明,jQuery学习网文章均为原创,转载时必须以链接形式标明本文地址。
本文地址:http://www.jquery001.com/use-google-prettify-to-highlight-code.html

大家说了些什么

  1. 1. 欧美音乐吧 2014-08-12 17:08

    有点厉害的哈。嘿嘿~

  2. 2. 蜜桃网 2014-08-28 12:08

    不错的文章,收藏了

  3. 3. 家用跑步机 2014-10-05 11:25

    不错的博客,支持一下!

  4. 4. 网上购物 2014-10-16 21:52

    文章不错谢谢分享

  5. 5. pongsan 2014-11-21 10:41

    这个并不能实现关键字高亮呀?

  6. 6. pongsan 2014-11-21 10:47

    哈哈。是颜色太淡了。我没仔细看。大赞。

  7. 7. 威客 2015-01-16 10:54

    初次到访,支持

所有话题