介绍

  • 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>应该写成 &lt a &gt

例子

代码主题选择

默认在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库的更多相关文章

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

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

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

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

  3. 迁移google code上的项目到本地版本库

    今年五月份以来就已经连接不上google code了,翻*墙又极度不稳定,在忍受了几个月之后终于决定将项目搬离google code;经过研究之后终于实现了搬迁到本地,最后总结成下文.一者期望对有需要 ...

  4. javascript实现代码高亮-wangHighLighter.js

    1. 引言 (先贴出wangHighLighter.js的github地址:https://github.com/wangfupeng1988/wangHighLighter注意,程序和使用说明的更新 ...

  5. bootstrap结合google code prettify的问题

    发现prettify不能显示行号,于是上网找了解决方法: 只使用prettify的js的文件,不使用css文件,另外添加这段css: .com { color: #93a1a1; } .lit { c ...

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

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

  7. 7个高性能JavaScript代码高亮插件

    本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染 ...

  8. [转]7个高性能JavaScript代码高亮插件

    对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高 ...

  9. 9个实用的Javascript代码高亮脚本

    代码高亮很有用,特别是在需要在网站或者blog中显示自己编写的代码的时候,或者给其他人查看或调试语法错误的时候.我们可以将代码高亮,以便阅读者可以十分方便的读取代码块,增加用户阅读代码的良好体验. 目 ...

随机推荐

  1. Matlab GUI memo

    有一段时间没写博客,一周4篇文章都坚持不下来,不知道写哪个方面的内容,写研究相关就怕论文查重查到,其他方面也没太多时间去学.还是花时间多学点其他方面.废话到此,很早就做过matlab gui相关,现在 ...

  2. Sql order by 和 group BY 如何共同运用?

    如果声明了 GROUP BY 子句,输出就分成匹配一个或多个数值的不同组里. 如果出现了 HAVING 子句,那么它消除那些不满足给出条件的组. 如果声明了 ORDER BY 子句,那么返回的行是按照 ...

  3. C++学习笔记--友元

    C++控制对类对象私有部分的访问,在外部无法直接访问类的私有或保护成员.通常,公有类方法提供唯一的访问途径.有时这种限制太严格,不适合特定的编程问题.所以C++提供了友元这种形式,通过让函数或类成为类 ...

  4. 参数或变量中有语法错误。 服务器响应为: mail from address must be same as authorization user

    企业qq发邮件失败,提示: 参数或变量中有语法错误. 服务器响应为: mail from address must be same as authorization user 解决办法: 登录邮箱,设 ...

  5. 003-spring boot项目的项目属性配置

    一.application.properties文件. 1.项目的配置文件内容.配置了端口,超时连接时间, 2.控制器. 3.访问. 二.application.yml文件 1.application ...

  6. java虚拟机-垃圾回收算法

    在Java中,程序员不需要去关心内存动态分配和垃圾回收的问题,这一切都交给了JVM来处理.但是首先需要明确,什么样的对象才能当为垃圾: 1.引用计数法:如果某个引用(即指针)指向对象,那么说明该对象还 ...

  7. convention over configuration

    惯例优先原则:也称为约定大于配置或规约大于配置(convention over configuration),即通过约定代码结构或命名规范来减少配置数量,同样不会减少配置文件:即通过约定好默认规范来提 ...

  8. 资产证券化（ABS）+ 特殊目的信托（SPV）

    资产证券化是指以基础资产未来所产生的现金流为偿付支持,通过结构化设计进行信用增级,在此基础上发行资产支持证券(Asset-backed Securities, ABS)的过程,通过将有形或者无形资产作 ...

  9. @RequestMapping @SessionAttributes @ModelAttribute注解用法

    简介: @RequestMapping RequestMapping是一个用来处理请求地址映射的注解,可用于类或方法上.用于类上,表示类中的所有响应请求的方法都是以该地址作为父路径. RequestM ...

  10. web worker 的传值方式以及耗时对比

    背景 前一阵子开发的项目 pptx 导入, 由于自己的代码问题,引起了个性能问题,一个 40p 的 pptx 文件,转换成 json 数据,大概要耗时 60s+ ,虽然后面发现是某个使用频率非常高的函 ...