代码高亮插件code-prettify

发布于 2019-05-05

代码高亮插件code-prettify

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

喜欢 2
奋楫笃行,臻于至善!

相关文章

Contract Form 7 联系表单插件创建自定义联系页面

Contract Form 7 是一个用来创建联系表单的 WordPress 插件,使用它可以轻松生成一个联系表单页面。可以自定义窗体并灵活调整邮件内容,该表单支持 ajax,CAPTCHA 验证码,...
阅读全文

Fixed Widget and Sticky Elements 粘性小部件插件创建浮动元素

之前分享过一篇 Sticky Menu (or Anything!) on Scroll 插件实现吸顶效果 的文章,可以用来固定网站上任何部位元素,今天为大家分享另一款插件:Fixed Widget ...
阅读全文

Sticky Menu (or Anything!) on Scroll 插件实现吸顶效果

Sticky Menu (or Anything!) on Scroll 是一个用来实现吸顶效果的 wordpress 插件,可以用来固定网站上任何部位元素(当然也包括顶部导航),该插件是基于 sti...
阅读全文

网站设置部分功能登录后才可以查看实现方法

有时候,我们可能会有这样的需求,网站的部分功能我们只希望自己可以查看 ,而不想让访客查看。无论是只隐藏部分功能还是隐藏整个站点,我们都可以通过插件或者修改 WEB 服务器的配置来完成。今天就为大家分享...
阅读全文

使用 WP Super Cache 插件开启预缓存模式提升网站性能

WP Super Cache 是通过生成静态 HTML 实现网站加速的,每次当页面被第一访问时(或过期后第一次被访问)才会自动生成缓存文件,WP Super Cache 还支持预缓存模式,使用预缓存模...
阅读全文

W3 Total Cache 缓存插件的使用说明及详细设置教程

上次介绍了 WP Super Cache 这个插件的使用方法,今天为大家推荐另一个缓存插件:W3 Total Cache,这个插件支持的功能较全,用来给网站加速是一个非常不错的选择。今天就来为大家介绍...
阅读全文

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注