这款插件的名字叫做 google-code-prettify。
1. 引入CSS和JS文件。
<link href="/path_to_prettify/prettify.css" rel="stylesheet"> <script src="/path_to_prettify/prettify.js"></script>
2. 把代码放进 <pre>...</pre> 或者 <code>...</code> 就可以实行代码高亮了。你也可以指定一种语言，class=”prettyprint Lang-html”，在lang- 后添加以下任何一种语言。“bash”, “c”, “cc”, “cpp”, “cs”, “csh”, “cyc”, “cv”, “htm”, “html”, ”java”, “js”, “m”, “mxml”, “perl”, “pl”, “pm”, “py”, “rb”, “sh”, ”xhtml”, “xml”, “xsl”。
<pre class="prettyprint linenums Lang-js"> var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value $.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the bootstrap functionality </pre>
3. 打开行号：可以从上面看到一个开关样式linenums，使用它可以打开行号。
<pre class="prettyprint linenums"> </pre>
4. 用JS或者JQ的方式启用插件。
$(document).ready(function(){
// google-code-prettify
prettyPrint();
});