代码高亮显示插件之谷歌google-code-prettify使用教程
google-code-prettify是Google的一款代码高亮插件。由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等语言。
将该代码高亮嵌入网站中只需三步:
1、在< head> 标签中引入 pretty.css
文件和 prettify.js
<link href="/google-code-prettify/prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="/google-code-prettify/prettify.js"></script>
注:该插件依赖jquery,需要引入jquery.js文件
2、加载插件,在body上加上prettyPrint()
<body onload="prettyPrint()">
注:如果不想在body中添加,也可以另外添加js语句$(function(){window.prettyPrint && prettyPrint();});
3、初始化pre
<script type="text/javascript"> jQuery(document).ready(function () { jQuery("pre").addClass("prettyprint linenums"); prettyPrint(); }); </script>
注:目的就是自动为pre加上prettyprint linenums
属性,当然也可以直接用class
,不过要麻烦些
通过以上三步即可,接下来只需要将想要高亮显示的代码添加到<pre></pre>
中即可,最后附上下载地址:
https://github.com/google/code-prettify