代码高亮插件code-prettify

WP插件评论9892字数 1202阅读模式

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等语言。

代码高亮插件code-prettify

一、下载地址:

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 文件。

本文已通过「原本」原创作品认证,转载请注明文章出处及链接。

夏日阳光
  • 本文由 夏日阳光 发表于 2019年5月5日
  • 本文为夏日阳光原创文章,转载请务必保留本文链接:https://www.pieruo.com/56.html
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
确定

拖动滑块以完成验证