Prism

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

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

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

为什么需要

为什么需要

基本用法

引入

引入 Prism 的 CSS 和 JS 文件

<!DOCTYPE html>
<html>
<head>
    ...
    <link href="themes/prism.css" rel="stylesheet" />
</head>
<body>
    ...
    <script src="prism.js"></script>
</body>
</html>

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

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

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

<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