Prism

Prism 是一个轻量级的，稳健的，优雅简洁的语法高亮插件。

这是一个从 Dabblet 拆分出来的项目

注：awesomes.cn 也是使用的 Prism 的高亮插件

为什么需要

为什么需要

基本用法

引入

引入 Prism 的 CSS 和 JS 文件

  [html]
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
    ...
    <link href="themes/prism.css" rel="stylesheet" />
</head>
<body>
    ...
    <script src="prism.js"></script>
</body>
</html>

将要高亮的代码按照如下的格式组织：

  [html]
1
2
3
4
5
<pre>
  <code class="language-css">
    p { color: red }
    </code>
</pre>

按照上面的步骤，代码将会被自动高亮，如果你不想代码被自动高亮，你可以给引用代码的 script 标签加上 data-manual 标记：

  [html]
1
<script src="prism.js" data-manual></script>

然后再手动调用 API

注：手动调用的场景比较常见，比如在页面上手动书写代码让其及时高亮预览就必须手动调用 Prism 的高亮方法 Prism.highlightAll，具体调用方法请查看文档。

完整功能列表

压缩后仅 2kb 大小，每个语言定义包大约只有 300-500 字节。

Encourages good author practices. 其它的语法高亮插件会鼓励甚至强制你使用错误的语义元素，像 <pre> 或者 <script>。

而 Prism 则强制你使用正确的素来标记代码： <code>。

你需要将代码写在 <code> 标签中，可以用 <pre> 来包裹 <code>。

此外，language 是以HTML5 草案推荐的方式定义的：通过形如 language-xxxx 的样式名指定。

language 定义是继承的。这就意味着，如果多个代码段是同一种语言，你就只需要在他们共同的父元素中定义一次。

参考资料

https://deepmind.t-salon.cc/article/113