prettify 代码高亮着色器google出品


Posted in Javascript onDecember 28, 2010

在<head></head>标签之间加入这两行代码:

<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css"/> 

<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript"/>

将<body>改为:

<body onload='prettyPrint()'>

将需要着色的代码写入以下形式的<pre></pre>标签之中:

<pre class=”prettyprint”> 

/*source code*/

更多演示

今天这篇文章主要讲述使用 google-code-prettify 来实现代码的高亮显示,以前我使用 highlight.js 来实现文章中代码的高亮显示。 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 标签上添加调用方法,如下:

<body onload="prettyPrint()">
</body>
将你需要高亮显示的代码片断放在<pre>标记里,如下:

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

使用 jQuery 小技巧实现优化

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

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

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

Javascript 相关文章推荐
一个判断email合法性的函数[非正则]
Dec 09 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 Javascript
Dom 学习总结以及实例的使用介绍
Apr 24 Javascript
js实现字符串转日期格式的方法
May 20 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
详解vue slot插槽的使用方法
Jun 13 Javascript
基于vue的短信验证码倒计时demo
Sep 13 Javascript
mpvue 如何使用腾讯视频插件的方法
Jul 16 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 Javascript
Vue基本使用之对象提供的属性功能
Apr 30 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 Javascript
微信小程序的引导页实现代码
Jun 24 Javascript
Pro JavaScript Techniques学习笔记
Dec 28 #Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
Dec 28 #Javascript
JavaScript动态调整TextArea高度的代码
Dec 28 #Javascript
JavaScript性能陷阱小结(附实例说明)
Dec 28 #Javascript
javascript写的日历类(基于pj)
Dec 28 #Javascript
Jquery下attr和removeAttr的使用方法
Dec 28 #Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 #Javascript
You might like
php验证session无效的解决方法
2014/11/04 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
Angular中管道操作符(|)的使用方法
2017/12/15 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
Javascript中弹窗confirm与prompt的区别
2018/10/26 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
2020/11/04 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
Django权限机制实现代码详解
2018/02/05 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
django框架创建应用操作示例
2019/09/26 Python
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
python中逻辑与或(and、or)和按位与或异或(&amp;、|、^)区别
2020/08/05 Python
python编写实现抽奖器
2020/09/10 Python
全球最大的游戏市场:G2A
2018/07/05 全球购物
Java程序开发中如何应用线程
2016/03/03 面试题
安全伴我行演讲稿
2014/09/04 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书