1.简介 introduction

  Google Code Pretiffy 是 Google 的一个用来对代码进行语法着色的 JavaScript 库,支持 C/C++, Java, Python, Ruby, PHP, VisualBasic, AWK, Bash, SQL, HTML, XML, CSS, JavaScript, Makefiles和部分Perl。

  code.google.com、stackoverflow.com、api.jquery.com等知名网站都在使用它。

2.官方示例 DEMO

  见http://google-code-prettify.googlecode.com/svn/trunk/tests/prettify_test.html

  如下图所示,为在网页上进行c语言代码着色后的效果:

3.特点 features list

工作基于前台页面
即使代码中包含行号、链接等等,也可运行。
简单的API :只需加载一点JS和CSS,以及添加一个onLoad事件。
轻量级:绝对的小体积并不会阻碍加载页面。 可通过CSS定制样式。
通过CSS定制的样式。主题库
支持所有的C类语言,Bash类语言,XML类语言。无需指定语言。
其它可扩展语言,你可以通过指定语言来支持。
良好的跨浏览器支持。

  

4.安装方法 installation

1、在你的网页上加载JS和CSS文件

<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>

  

2、然后在html 的body标签中添加一个onload事件 onload=”prettyPrint()”

如果你加载了JQuery,则可以添加以下代码

$(document).ready(function(){
prettyPrint();
})  

到这里,你的google-code-prettify基本可以工作了。

5.使用方法 usage

你只需要把代码放进

<pre>...</pre> 或者 <code>...</code>  

就可以实行代码高亮了。

无需你指定哪种语言就可以工作了。当然,你也可以指定一种语言,

<pre class=”prettyprint Language”>,  

language 改为以下的一种语言:“bash”, “c”, “cc”, “cpp”, “cs”, “csh”, “cyc”, “cv”, “htm”, “html”, ”java”, “js”, “m”, “mxml”, “perl”, “pl”, “pm”, “py”, “rb”, “sh”, ”xhtml”, “xml”, “xsl”。

 

6.参考 reference

1.google-code-prettify使用手册:http://google-code-prettify.googlecode.com/svn/trunk/README.html

2.google-code-prettify主页:http://code.google.com/p/google-code-prettify/

3.http://www.hujuntao.com/web/javascript/google-code-pretiffy-lightweight-code-highlighting-plugin.html

Google Code Pretiffy 代码 着色 高亮 开源 javascript(JS)库的更多相关文章

  1. freshcodecolor纯正则实现的在线代码着色(高亮)

    小菜最新完成的一款在线代码着色工具-freshcodecolor,该工具采用Javascript编写,着色识别策略完全采用正则表达式,无奈正则表达式在Javascript中有很大局限性,导致某些场合识 ...

  2. Google Code项目代码托管网站上Git版本控制系统使用简明教程

    作为一个著名的在线项目代码托管网站,Google Code目前主要支持三种版本控制系统,分别为Git, Mercurial和 Subversion.Subversion即SVN相信大家都已经熟知了,这 ...

  3. 微软MVC框架实战:开源的JS库Knockout

    [IT168 技术] Knowckout – 当MVC遭遇MVVM Knockout (或者Knockout.js ,KnockoutJS)是一个开源的JavaScript库,网址为www.knock ...

  4. 最新开源JavaScript 图表库 ECharts推荐

    ECharts是一款由百度前端技术部开发的,基于Javascript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表. ECharts 提供大量常用的数据可视化图表,底层基于Z ...

  5. 使用 Google Code Prettify 实现代码高亮

    今天这篇文章主要讲述使用 google-code-prettify 来实现代码的高亮显示,以前我使用 highlight.js 来实现文章中代码的高亮显示. prettify 非常小巧且配置简单,使用 ...

  6. 五、Google Code Prettify:实现代码高亮的JS库

    介绍 code prettify 解释为 “代码修饰”. 他由JS代码和CSS代码构成,用来高亮显示HTML页面中的代码. 支持:C, Java, Python, Bash, HTML, XML, J ...

  7. svn import 向Google code里导入初始代码

    其实很简单的问题,花费了这么多时间,想把初始代码导入到Google code里,用VisaulSVN插件的Switch功能也不可以,Google code上虽然有上传,但是只能单个文件传...... ...

  8. ECLIPSE使用HG插件去上载 GOOGLE.CODE下的代码

    ECLIPSE使用HG插件去上载 GOOGLE.CODE下的代码 www.MyException.Cn   发布于:2012-09-10 22:20:12   浏览:112次 0   ECLIPSE使 ...

  9. [开源]Google code Android开源项目(一)

    [Android分享] [开源]Google code Android开源项目(一) [复制链接]     449122717 2 主题 2 好友 816 积分 No.4 中级开发者 升级  19.3 ...

随机推荐

  1. 即时通讯UI-聊天界面(UITableView显示左右两人聊天)

    目录 1.创建UITableView对象并设置相关属性 2.创建cellModel模型 //枚举类型 typedef enum { ChatMessageFrom = ,//来自对方的消息 ChatM ...

  2. 传说中的WCF(7):“单向”&“双向”

    在WCF中,服务器与客户端的通讯有单向(单工)和双向(双工)之分.要说有什么形式上的表现,那就是单向与双向生成的SOAP不同,咱们先放下代码不说.但通常情况下,我们也不太需要去研究生成的SOAP是啥样 ...

  3. HDFS2.x之RPC流程分析

    HDFS2.x之RPC流程分析 1 概述 Hadoop提供了一个统一的RPC机制来处理client-namenode, namenode-dataname,client-dataname之间的通信.R ...

  4. lintcode:数字组合I

    数字组合I 给出一组候选数字(C)和目标数字(T),找到C中所有的组合,使找出的数字和为T.C中的数字可以无限制重复被选取. 例如,给出候选数组[2,3,6,7]和目标数字7,所求的解为: [7], ...

  5. GSM、3G、LTE、4G

    3GPP(The 3rd Generation Partnership Project)3GPP的目标是实现由2G网络到3G网络的平滑过渡,保证未来技术的后向兼容性,支持轻松建网及系统间的漫游和兼容性 ...

  6. jQuery年月日(生日)选择器

    我们在编辑用户资料时经常会遇到选择生日选项的问题,今天我给大家介绍如何使用js来实现年月日(生日)选择器,能够准确计算闰年的年月日,方便表单处理. 文章:http://www.helloweba.co ...

  7. 自由软件VS开源软件

    自由软件VS开源软件 “自由软件运动”是一项倡导软件这种知识产品应该免费共享的社会运动,它主要是从社会伦理学,道德的高度,强调我们每个人都有自由使用软件的权利.这种权利不应该被软件私有所破坏. 反对软 ...

  8. IDEA中利用JUnit进行单元测试

    打开IntelliJ IDEA工具,Alt+Ctrl+S,打开设置窗口,点击进入Plugins. 从插件资源库中搜索JunitGenerator V2.0版本

  9. CentOS7安装配置Apache HTTP Server

    RPM安装httpd 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 # yum -yinstall http ...

  10. struts使用html:file上传文件的时候文件名乱码解决

    <body> <html:form action="/jwid/struts1x/15.3/form/upload.do?action=upload" encty ...