五、Google Code Prettify：实现代码高亮的JS库

时间：2014-03-03 15:54:07 阅读：574 评论：0 收藏：0 [点我收藏+]

介绍

bubuko.com,布布扣

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()">

bubuko.com,布布扣

默认在prettify中有5种选择：

比如你想使用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/ 下载。

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/

原文：http://www.cnblogs.com/xiazdong/p/3575693.html

踩

(0)

评论一句话评论（0）

分享档案

更多>