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

时间 2019-11-09

标签 google code prettify 实现代码亮的栏目 Google 繁體版

原文原文链接

介绍

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种选择：javascript

prettify.css
sunburst.css
desert.css
doxy.css
sons-of-obsidian.css

好比你想使用sunburst.css，则咱们只须要将：css

<link rel="stylesheet" href="css/prettify.css" />

替换成html

<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下载。java

语言支持

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.htmlgit

[2] 扩展的Prettify主题CSS样式：http://jmblog.github.io/color-themes-for-google-code-prettify/github

[3] 代码格式化工具：http://tool.oschina.net/codeformatsvn