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. Windows 7 常用快捷键 命令

    Win+E:  打开新的windows资源浏览器 Win+F:搜索文件或文件夹 Win+R:打开运行窗口 Win + D:显示桌面 Win + M:最小化所有窗口 Ctrl+Shift+N: 新建文件 ...

  2. java基础知识回顾之抽象类和接口的区别

    /* 抽象类和接口的异同点: 相同点: 都是不断向上抽取而来的. 不同点: 1,抽象类需要被继承,而且只能单继承. 接口需要被实现,而且可以多实现. 2,抽象类中可以定义抽象方法和非抽象方法,子类继承 ...

  3. 使用动态SQL语句实现简单的行列转置(动态产生列)

    原始数据如下图所示:(商品的销售明细)date=业务日期:Item=商品名称:saleqty=销售数量: -- 建立测试数据(表)create table test (Date varchar(10) ...

  4. ARM 汇编指令

    ARM汇编程序特点: l         所有运算处理都是发生通用寄存器(一般是R0~R14)的之中.所有存储器空间(如C语言变量的本质就是一个存储器空间上的几个BYTE).的值的处理,都是要传送到通 ...

  5. UML类图、接口、包、关系

    一.类图:允许我们去标记静态内容及类之间的关系. 类的基本表示法: 名称 属性(类型,可见性) 方法(参数,返回值)  tip: 显示可见性:Options->Show Visibility 显 ...

  6. PowerMockito(PowerMock用法)

    网络上大部分是powermock 的用法, PowerMock有两个重要的注解: –@RunWith(PowerMockRunner.class) –@PrepareForTest( { YourCl ...

  7. lintcode:打劫房屋 III

    题目 打劫房屋 III 在上次打劫完一条街道之后和一圈房屋之后,窃贼又发现了一个新的可以打劫的地方,但这次所有的房子组成的区域比较奇怪,聪明的窃贼考察地形之后,发现这次的地形是一颗二叉树.与前两次偷窃 ...

  8. 【PSR规范专题(3)】PSR-2 代码风格规范

    [PSR规范专题(3)]PSR-2 代码风格规范 标签(空格分隔): PHP 转载自:https://github.com/PizzaLiu/PHP-FIG/blob/master/PSR-2-cod ...

  9. 使用xshell链接本地虚拟机中的Linux

    昨天想在自己机器上安装一下Linux,并使用xshell访问,可是费了很长时间,在xshell端都提示“Could not connect to '192.168.54.100' (port 22): ...

  10. 如何在Eclipse中添加Tomcat的jar包

    原文:如何在Eclipse中添加Tomcat的jar包 右键项目工程,点击Java Build Path 点击Add Library,选择Server Runtime 选择Tomcat版本 此时就看到 ...