使用Prism.js来实现代码高亮

之前用过highlight.js来实现代码高亮，现在更加喜欢用Prism.js。Prism 是一个轻量级、可扩展的语法高亮库，使用现代化的 Web 标准构建。使用 Prism.js 可以快速为网站添加代码高亮功能，支持超过上百种编程语言，还支持多种插件，是简洁、高效的代码高亮解决方案。

为什么选择 Prism.js

简单易用 引用 prism.css 和 prism.js，使用合适的 HTML5 标签（code.language-xxxx），搞定！

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

轻如鸿毛 核心代码压缩后只有 2KB。每添加一个语言平均增加 0.3-0.5KB，主题样式在 1KB 左右。

快如闪电 如果可能，支持通过 Web Workers 实现并行。

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

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

如何使用

导入引擎和样式

<script type="text/javascript" src="prism.js"></script>
<link rel="stylesheet" type="text/css" href="prism.css" />

prism.js和prism.css你都可以自己在 https://prismjs.com/download.html 上选择配置，支持的语言有很多，选择你自己需要的语言；也有很多插件，比如行号，代码复制，代码预览，代码语言等，都可以自行选择。官方也提供多种主题配色，选择适合自己的。

选择好之后下载对应的 js 和 css 来引用到你的项目中。

在文章中插入代码

Prism.js 推荐使用 w3c 推荐的标准的在页面中嵌入代码的方式，像下面这样：

<pre>
  <code class="language-xxx">
这里写代码
  </code>
</pre>

language-xxx中的xxx是语言的名字。这时代码就会被 Prism.js 自动识别并高亮。

显示行号

Prism.js 的行号是作为插件提供的，它需要一个开关来启用它：在 <pre> 标签上加上一个 line-numbers 类。

<pre class="line-numbers">
  <code class="language-xxx">
这里写代码
  </code>
</pre>

转义Prism中的尖括号 < >

假如发表类似html代码，会有尖括号 < >，直接使用会有问题，需要进行转义，需要使用 < 和 > ，而不是 < 和 > 。