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. POJ 2153 Rank List (map映射)

    水题,竟然花了那么多时间...主要是不知道为什么,明明在本机上编译过去了,但是用c++提交却编译错误...最后用g++提交AC 题意:给出n个学生的名字,然后给出m个测验. 每个测验给出n个学生的分数 ...

  2. POJ 1547

    #include<iostream> #include<string> using namespace std; int main() { int length; int hi ...

  3. linux kill命令详解

    1.命令格式: kill[参数][进程号] 2.命令功能: 发送指定的信号到相应进程.不指定型号将发送SIGTERM(15)终止指定进程.如果任无法终止该程序可用“-KILL” 参数,其发送的信号为S ...

  4. getElementByClassName封装函数用法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  5. Centos环境下部署游戏服务器-SVN

    版本控制工具的文章已经被写滥了,所以本篇文章不想介绍如何安装Svn如何可视化操作这些东西.本篇文章讲述我自己对Svn的理解,以及在命令行下操作.为啥不应可视化界面?有两方面的原因,远程登录到服务器都是 ...

  6. 在db2中 两个数据库之间的两个表的联合查询

    大家好,今天遇到了在db2中 两个数据库之间的两个表的联合查询 我知道oracle中有dblink,可是不知到db2的两个数据库联合查询怎么处理我找了类似于比如两个数据库: db1,db2用户名密码s ...

  7. MyBatis学习总结_12_Mybatis+Mysql分页查询

    package cn.tsjinrong.fastfile.util; /** * @ClassName: Page * @Description: TODO(分页组件的父类,用来封装分页的 通用内容 ...

  8. gdb与adb相关命令总结

    在使用gdb与adb时需要注意一些类似于权限的问题,比如设备需要root,设备root后命令行下需要 切换用户到root用户下操作,又比如相关的目录或文件是否有足够的权限等等,总结为如下: (以下示例 ...

  9. MSBuild和Jenkins搭建持续集成环境

    http://www.2cto.com/os/201409/334323.html http://my.oschina.net/anxuyong/blog/353897 http://www.cnbl ...

  10. 机器学习 —— 概率图模型(Homework: Structure Learning)

    概率图的学习真的要接近尾声了啊,了解的越多越发感受到它的强大.这周的作业本质上是data mining.从数据中学习PGM的结构和参数,完全使用数据驱动 —— No structure, No par ...