最新消息:

第99款插件:Prism.js一款轻量级可扩展的代码语法高亮库

语法着色 杨红伟 2287浏览 0评论

一:插件简介

Prism 是一个轻量级并且简单易用的 JavaScript 类库,minified 和 gzipped 压缩后只有 1.5kb 大小,即使添加语言定义代码,最大也不会超过 2kb,是目前最小的代码高亮 Javascript 类库。

Prism 使用非常简单,只需添加 Javascript 和 CSS 就能够轻易的将其整合进项目中使用。目前它已内置了 HTML\CSS\Javascript 三种语言的高亮支持,你也可以添加新的语法高亮配置文件,只需修改 Javascipt 和 CSS 文件就行。除此之外,它也提供了额外的插件功能,让你可以新增其它功能,比如自动转换链接等,你也可以自己撰写插件。

目前 Prism 唯一的缺点就是不支持 IE8,看作者的博客介绍,也不想支持 IE8。

二:插件作者及下载

作者: @author Lea Verou http://lea.verou.me

官方网站: http://prismjs.com

官网下载:http://prismjs.com/download.html

GitHub下载: https://github.com/LeaVerou/prism/

本站下载:http://www.ijquery.cn/assets/prismjs/prism-gh-pages.zip

三:插件最简使用方法

注意 class 为 language-css,如果是 javascript 就是 class=”language-javascript”,演示地址: http://www.ijquery.cn/assets/prismjs/simple/demo1.html

<!DOCTYPE html>
<html>
<head>
	<link href="prism.css" rel="stylesheet" />
</head>
<body>
<pre><code class="language-css">p { color: red }</code></pre>
<script src="prism.js"></script>
</body>
</html>

结果如图,这样好像不好看吧,不过是最基本的使用方法:

四:插件扩展使用方法

本身 prism 是不支持php的,但是作者已经想到了这一点,我们也有办法支持!

目录下 themes 是模板文件夹(有很多样式,如 prism-okaidia.css 是黑色模板),components 是扩展组件(可以支持php,如 prism-php.js 是支持php的组件。)代码如下:

演示地址: http://www.ijquery.cn/assets/prismjs/simple/demo2.html

<!DOCTYPE html>
<html>
<head>
	<link href="prism-okaidia.css" rel="stylesheet" />
</head>
<body>
<pre><code class="language-php">namespace my\name;
$c = new \my\name\MyClass;
$arr = [1,2,3];
trait ezcReflectionReturnInfo {
    function getReturnType() { /*1*/ }
    function getReturnDescription() { /*2*/ }
}
function gen_one_to_three() {
    for ($i = 1; $i <= 3; $i++) {
        // Note that $i is preserved between yields.
        yield $i;
    }
}</code></pre>
<script src="prism.js"></script>
<script src="prism-php.js"></script> </body>
</html>

结果如图,看看,这样是不是很好看了。什么,没有行号?那第你看完这篇文章,继续看第五点!

五:我想有行号,怎么办?

演示地址:http://www.ijquery.cn/assets/prismjs/simple/demo3.html

在目录下插件 plugins/line-numbers 这个文件夹的全部内容就指的是行号。源代码如下:

<!DOCTYPE html>
<html>
<head>
	<link href="prism-okaidia.css" rel="stylesheet" />
	<link href="prism-line-numbers.css" rel="stylesheet" />
</head>
<body>
<pre class="line-numbers"><code class="language-php">namespace my\name;
$c = new \my\name\MyClass;
$arr = [1,2,3];
trait ezcReflectionReturnInfo {
    function getReturnType() { /*1*/ }
    function getReturnDescription() { /*2*/ }
}
function gen_one_to_three() {
    for ($i = 1; $i <= 3; $i++) {
        // Note that $i is preserved between yields.
        yield $i;
    }
}</code></pre>
<script src="prism.js"></script>
<script src="prism-php.js"></script>
<script src="prism-line-numbers.js"></script>
</body>
</html>

结果如图,是不是很好看啊:

六:最后要说的是

此目录下的很多文件都是值得学习的!有时间了,可以好好仔细研究研究!在一般需求下,上边几项基本的都够了!!!!!!

还有可以在 body 上加上class,如下所示:

<body class="line-numbers">

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址