js代码高亮插件:Prism

  2016-08-26 13:53

Prism是一个建立在当代web标准上的轻量级可扩展的代码高亮插件。数以千计的网站都应用了它,其中包括许多你日常浏览的网站。
(这篇文章只翻译了官网简介中的特性、使用限制以及使用方法三个部分。预览演示、支持的语言以及扩展插件等部分还请移步官网。)

全部特性

  • 压缩包只有2KB大小。每种语言大约300-500B。
  • 鼓励更好的编写方式。其他代码高亮插件鼓励甚至强迫你使用错误的方式,例如 <pre> 或者 <script>。Prism强迫你使用正确标记代码的元素:<code>。你可以用它做行内的标记,也可以用在 <pre> 的代码块里。此外,语言标记遵循着 HTML5 草案:添加 language-xxxx class。
  • 语言的定义可以继承。这意味着如果不同的代码片段是基于同一种语言,你可以在他们共同的祖先上定义语言类型。
  • 支持多线程,但默认关闭。
  • 可以不通过调整代码代码来扩展功能,Prism 有完善的插件体系,有很多钩子(hooks)可以使用。
  • 方便定义新语言,只要你非常熟悉它的通用语法。
  • 样式全部用CSS写成,采用合理的命名方式,而不是看不懂的缩写。
  • 支持的浏览器:IE9+、Firefox、Chrome、Safari、Opera以及大多数手机浏览器。
  • 支持嵌入式语言高亮(例如HTML里的CSS和JavaScript)。
  • 不只是代码块,行内的代码也会高亮。
  • 支持嵌套语言高亮(HTML里的CSS和JavaScript)。
  • 不需要使用任何特殊标记,哪怕是一个class名字,你只需要使用标准的代码标记。如果一段时间之后不想用它,只需要移除即可,不会留下任何痕迹。
  • 可以利用扩展插件将其中的一行或者几行突出显示。
  • 利用扩展插件可以显示缩进和换行符等隐藏特性。
  • 利用插件可以标注注释里的URL和email链接,使他们可以点击。

使用限制

  • 代码里预先存在的HTML会被分离。
  • 基于正则表达式,在某些特定的语言会显示错误。
  • 不支持IE6-IE8浏览器。阅读代码的人85%都将使用现代浏览器。

使用方法

把prism.css和prism.js文件加载到你的页面里。

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

为了鼓励代码编写的规范性,Prsim 只能在 <code> 元素上起作用,未使用 <code> 标注的代码在语义上是无效的。根据 HTML5 规范,定义代码语言的合适方式是添加 language-xxxx class,Prsim 用的也正是这种方式。为了简化操作,Prsim 假设语言是可继承的。因此如果多行 <code> 元素采用的是同一种语言,你可以把 language-xxxx class 定义在他们共同的祖先上。用这种方法,你甚至可以把 language-xxxx class 添加在 <body><html> 元素上来定义一个文档范围内的语言。

如果你想让一个定义了代码语言的元素后代不显示代码高亮,添加一个 language-none 的 class 即可(或者定义一种不存在的语言)。

我们建议代码块(不论是语义上还是在 Prism 里)使用用 <pre> 元素包裹一个 <code> 元素,像这样子:

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

如果你用这种方法, <pre> 元素会自动得到 language-xxxx class (如果原本没有的话)并以代码块形式显示。

如果不想让代码被自动高亮可以使用API,在你载入 js 文件的 <script> 元素上添加 data-manual,像这样:

<script src="prism.js" data-manual> </script>

如果你想在服务端使用,或者使用命令行,Prism 也可以在 Node.js 中使用。如果你想在像AMP那样浏览器不支持js的环境下创建HMTL静态网页,可以用这种方式添加代码高亮。

在Node.js里安装Prism:

$ npm install prismjs

例如:

var Prism = require('prismjs');
// The code snippet you want to highlight, as a string
var code = "var data = 1;";
// Returns a highlighted HTML string
var html = Prism.highlight(code, Prism.languages.javascript);

演示及下载地址

下载地址(可以选择不同的风格主题及语言)

官网链接:http://prismjs.com/

你好,游客!(点击更改信息)

您的电子邮件不会被公布,带*为必填。


  •   正在提交中,请稍候...
      评论提交成功
    回复 的评论,点击取消回复。