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