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

时间：2021-12-31 14:40:31

介绍

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

例子

代码主题选择

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

默认在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

相关文章