Prism 是一个轻量级,可扩展的语法着色工具,符合 Web 标准。它压缩后只有 2KB,每种语言定义约增加300-500自己大小。非常易于使用,只需要插入一个 CSS 和 JS 文件即可。支持多种着色主题。

支持各种编程语言和插件:

Prism.js的优点

极致易用

引用 prism.css 和 prism.js,使用合适的 HTML5 标签(code.language-xxxx),搞定!

天生伶俐

语言的 CSS 类是可继承的,所以你只需定义一次就能应用到多个代码片段。

轻如鸿毛

代码压缩后只有 1.6KB。每添加一个语言平均增加 0.3-0.5KB,主题在 1KB 左右。

快如闪电

如果可能,支持通过 Web Workers 实现并行。

轻松扩展

定义新语言或扩展现有语法,或者新增功能都非常简单。

丰富样式

所有的样式通过 CSS 完成,并使用合理的类名如:.comment, .string, .property 等。

Prism.js使用方法

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

1、首先在页面的 head 中引入 Prism 的 CSS 样式文件和Prism类库

<link href="prism.css" rel="stylesheet"/>  
<script src="prism.min.js"></script>  

2、添加要高亮显示的代码,要放在 pre 标签中,设置 code 标签的样式类型为代码的类别,如下:

<pre><code class="language-xxx">p { color: red }</code></pre>  

//注意:language-xxx,后面的xxx 是代码类型,在Prism.js的下载页面“Language”一栏下有详细描述,见下图
//如:当前代码是html类型 那此处的language-xxx,就应该替换为 language-markup
//相对应的js类型代码,即将language-xxx,替换为language-javascript

Prism 官网 | 代码示例 | 立即下载