prettify.js 是 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等语言。
一、下载地址:
Git地址: https://github.com/google/code-prettify
CDN地址:http://www.bootcdn.cn/prettify
二、使用方法
1、加载prettify类库
方式一、通过第三方CDN加载(推荐)
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=sunburst"></script>
方式二、本地加载
<link type="text/css" href="prettify.css" rel="stylesheet" /> <script type="text/javascript" src="run_prettify.js"></script>
2、在body的onload事件里添加函数onload=”prettyPrint()”
<body onload="prettyPrint()">
3、给pre标签添加class属性,值为:”prettyprint linenums”:
<pre class="prettyprint"> ... </pre>
也可以通过js动态添加:
$(document).ready(function() { $("pre").addClass("prettyprint"); });
三、prettify支持5种样式(皮肤):
- prettify.css
- sunburst.css
- desert.css
- doxy.css
- sons-of-obsidian.css
四、run_prettify.js 与 prettify.js 的区别
在上面引入JS的时候,方式一使用的是run_prettify.js,方式二使用的是 prettify.js,二者有什么区别呢?
简单来说 run_prettif.js 是自动完成渲染工作的,使用 prettify.js,需要手动调用prettyPrint方法。
<script type="text/javascript"> window.onload = function () { prettyPrint(); } <script>
另外,run_prettify.js,它还会加载一些其它语言支持的 JS 文件。