介紹
- 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