引言
今天要介绍的是一款在Web开发中的轻量级代码高亮插件——PRISM（中文名：棱镜），它是一个基于现代Web开发语言标准构建的，在很多网站都使用到了它。例如我们熟知的React官网，就用到了它，下面截图就可以看到效果。
官网
https://prismjs.com/
下载
官网给我们提供了自定义的下载prism的方式，即我们可以分主题，分支持的语言、分扩展插件、以及分开发版和压缩版，如下图所示：
prism提供了几乎所有语言的支持，我们截图大致看一下它支持的语言：
由于官网的排版问题，部分内容可能没有截图完整，下面再看一下它支持的插件
我选择的是压缩版，然后勾选上了所有插件和所有支持的语言，prism.js和prism.css合在一起大小是370.62k。实际上我们根本用不了这么多，因此我们在用的时候没有这么大。
基本使用方法
- 首先我们得在页面引用我们的css和js文件
- 标准的写法我们需要使用pre和code标签，就像下面这样，code的class可以指定显示的语言
<pre>
<code class="language-css">p { color: red }</code>
</pre>
显示的效果如下，这是一个最简单的实例
我们来尝试稍微复杂点的，右上角会显示语言和复制，非常的实用，比如我们搭建自己的博客或者记录笔记等场景。
常见语言测试
我这里分别使用JavaScript、Java、C#和Python语言进行了简单的测试，使用的是官网提供的Coy主题，效果如下图，还有太多的语言就不一一测试了。
ES6或者其他用法
$ npm install prismjs import Prism from 'prismjs';
这个地方可能需要Babel-plugin-prmjs插件来管理你的语言等等配置。
在nodejs中使用
var Prism = require('prismjs');
// 你想使用高亮的代码片段
var code = "var data = 1;";
// 返回一个html字符串
var html = Prism.highlight(code, Prism.languages.javascript, 'javascript');
主题预览
我们这里使用React的一段代码进行演示，它是支持JSX代码高亮的
- 默认的主题样式
- Dark主题样式
- funky主题样式
- Okaidia主题样式
- Twilight主题样式
- coy主题样式
- Solarized Light主题样式
- Torrow Night主题样式
总结
Prism支持的语言实在是太多了，我这里就不在一一演示，大家感兴趣的可以自己去研究研究，官网提供了完整的Demo，还支持各种扩展，例如显示行号这样的需求，它都可以实现，代码高亮的插件有不少，大家可以在评论区留下你自己使用的哪一个，每款插件都只是一种选择，选择一个适合自己的或者自己喜欢的就可以了，希望本文对你有所帮助，感谢支持！