五、Google Code Prettify：实现代码高亮的JS库
介绍
- code prettify 解释为 “代码修饰”。
- 他由JS代码和CSS代码构成，用来高亮显示HTML页面中的代码。
- 支持：C, Java, Python, Bash, HTML, XML, Javascript, Makefiles, Ruby, PHP, Awk, Perl, Basic, Clojure, CSS, Dart, Erlang, Go, Haskell, Lisp, Scheme, LLVM, Lua, Matlab, Pascal, R, Scala, SQL, LaTeX等语言。
开始使用
- 在使用之前我建议将prettify.css中 li 的样式中添加：list-style-type:decimal 使得每行都有行号，而不是每5行有一个号。
- 加入主要的CSS文件和JS文件：
<link rel="stylesheet" href="css/prettify.css" /> <!-- 设置代码主题，此文件为默认主题，你可以换成其他主题-->
<script src="js/prettify.js" type="text/javascript"></script>
- 在<body>标签中加入onload="prettyPrint();"
<body onload="prettyPrint()">
- 将代码放在<pre class="prettyprint linenums">标签内，其中 linenums 表示为代码添加行号，可以不写。
- 注意：像html中的特殊字符需要转义，比如<a>应该写成 < a >
例子
代码主题选择
默认在prettify中有5种选择：
- prettify.css
- sunburst.css
- desert.css
- doxy.css
- sons-of-obsidian.css
比如你想使用sunburst.css，则我们只需要将：
<link rel="stylesheet" href="css/prettify.css" />
替换成
<link rel="stylesheet" href="css/sunburst.css" />
扩展样式可以从 http://jmblog.github.io/color-themes-for-google-code-prettify/ 、http://stanleyhlng.com/demo/?url=http%3A%2F%2Fdemo.stanleyhlng.com%2Fprettify-js%2F&surl=http%3A%2F%2Fstanleyhlng.com%2Fprettify-js%2F下载。
语言支持
- prettify默认支持类C语言（如java等）等，我们可以通过添加额外的JS文件来使得prettify支持该语言的代码高亮（额外的JS文件从此处下载）。比如添加 lang_go.js 并<pre class="prettyprint lang_go">可以使得支持go语言。
参考文献
[1] 官方文档：http://google-code-prettify.googlecode.com/svn/trunk/README.html
[2] 扩展的Prettify主题CSS样式：http://jmblog.github.io/color-themes-for-google-code-prettify/
[3] 代码格式化工具：http://tool.oschina.net/codeformat
五、Google Code Prettify：实现代码高亮的JS库的更多相关文章
- 使用 Google Code Prettify 实现代码高亮
今天这篇文章主要讲述使用 google-code-prettify 来实现代码的高亮显示,以前我使用 highlight.js 来实现文章中代码的高亮显示. prettify 非常小巧且配置简单,使用 ...
- ECLIPSE使用HG插件去上载 GOOGLE.CODE下的代码
ECLIPSE使用HG插件去上载 GOOGLE.CODE下的代码 www.MyException.Cn 发布于:2012-09-10 22:20:12 浏览:112次 0 ECLIPSE使 ...
- 迁移google code上的项目到本地版本库
今年五月份以来就已经连接不上google code了,翻*墙又极度不稳定,在忍受了几个月之后终于决定将项目搬离google code;经过研究之后终于实现了搬迁到本地,最后总结成下文.一者期望对有需要 ...
- javascript实现代码高亮-wangHighLighter.js
1. 引言 (先贴出wangHighLighter.js的github地址:https://github.com/wangfupeng1988/wangHighLighter注意,程序和使用说明的更新 ...
- bootstrap结合google code prettify的问题
发现prettify不能显示行号,于是上网找了解决方法: 只使用prettify的js的文件,不使用css文件,另外添加这段css: .com { color: #93a1a1; } .lit { c ...
- Google Code项目代码托管网站上Git版本控制系统使用简明教程
作为一个著名的在线项目代码托管网站,Google Code目前主要支持三种版本控制系统,分别为Git, Mercurial和 Subversion.Subversion即SVN相信大家都已经熟知了,这 ...
- 7个高性能JavaScript代码高亮插件
本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染 ...
- [转]7个高性能JavaScript代码高亮插件
对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高 ...
- 9个实用的Javascript代码高亮脚本
代码高亮很有用,特别是在需要在网站或者blog中显示自己编写的代码的时候,或者给其他人查看或调试语法错误的时候.我们可以将代码高亮,以便阅读者可以十分方便的读取代码块,增加用户阅读代码的良好体验. 目 ...
随机推荐
- Java基础—注解（转载）
概念 注解(Annotation),也叫元数据.一种代码级别的说明.它是JDK1.5及以后版本引入的一个特性,与类.接口.枚举是在同一个层次.它可以声明在包.类.字段.方法.局部变量.方法参数等的前面 ...
- sdut3140 A*B（math)
题目:传送门 题目描述 Your task is to find the minimal positive integer number Q so that the product of digits ...
- 编写项目readme文件
1.使用markdown 编写项目说明,markdown 编辑器推荐使用 小书匠 2.在当前项目根目录下使用cmd中的tree 命令 生成项目结构文件到指定的txt文件中,具体命令为:tree d: ...
- XE6移动开发环境搭建之IOS篇（7）：在Mac OSX 10.8中安装XE6的PAServer（有图有真相）
XE6移动开发环境搭建之IOS篇(7):在Mac OSX 10.8中安装XE6的PAServer(有图有真相) 2014-08-22 21:06 网上能找到的关于Delphi XE系列的移动开发环境的 ...
- web前端攻城狮整理的收藏夹
作为一名web前端开发工程师你的收藏夹存对了吗?下面是一份互联网上流传甚广的web前端开发收藏夹资源,包含学习网站.JS库.常用工具.常用插件.资讯书籍等资源.速速转存吧~ 一.学习网站 W3 ...
- ruby中的可调用对象--方法
上一篇讲了ruby中的可调用对象proc和lambda,他们都是块转换成的对象.ruby中的可调用对象还有方法.通过使用method方法,并且以方法名作为参数(字符串或者符号),就可以得到一个方法对象 ...
- iClap分享：如何优雅的在 APP 中实现测试？
开发团队常面临的问题有:内测 APP 时测出一堆 bug 写了很多文档,交到下一个人手中时问题总是不够清晰明了;版本发布公测时只能分发原生版本给团队和用户,无法快速反馈测试和体验结果;使用第三方工具, ...
- Salesforce视图与控制器之间的交互
刚接触Salesforce,过程的确是比较艰难了,中文资料几乎没有,看英文资料学的效率却不高,不过看了一段时间的英文资料发现自己英语水平挺高不少啊,现在看都不用工具翻译,早知道就再次尝试报个6级,看下 ...
- SpringMVC整合ActiveMQ
spring activeMq 配置 <!-- ActiveMQ 连接工厂 --> <!-- 真正可以产生Connection的ConnectionFactory,由对应的 JMS服 ...
- JS正则表达式从入门到入土（6）—— 贪婪模式与非贪婪模式
贪婪模式 之前说了正则的量词,但是量词会带来一个到底该匹配哪个的问题. 如下正则表达式: \d{3,6} 这个正则表达式是匹配3到6个数字,但是当这个正则表达式被用来匹配12345678这个字符串,到 ...