注册登录

漂亮的代码语法高亮库：Prism.js

prismjs 是一款轻量、可扩展的代码语法高亮库，使用现代化的 Web 标准构建，使用 Prismjs 可以快速为网站添加代码高亮功能，支持超过上百种编程语言，还支持多种插件，是简洁、高效的代码高亮解决方案。

查看演示 下载源码

如何使用

我们只需要在页面上引入 prism.css 和 prism.js 文件：

<!DOCTYPE html>
<html>
<head>
    ...
    <link href="https://zhishitu.com" rel="stylesheet" />
</head>
<body>
    ...
    <script src="/prism.js"></script>
</body>
</html>
知识兔

根据HTML5规范，代码标记需要使用<code>元素，使用Prism时，可以给code元素添加language-xxx类。如果多个<code>元素具有相同的语言，则可以在其共同的父元素 上添加language-xxx类。这样，您还可以通过在<body>或<html>元素上添加language-xxx类来定义文档范围的默认语言。

Prism推荐使用内部语义化的pre 元素和 code 元素来标记代码区块，如下所示：

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

如果你的代码块是其他语言，你可以把language-xxx类中的xxx改成设定的语言，如：html，javascript，php等。

Prism.js支持很多种语言和插件主题。把一些不必要支持的语言包下载下来，会加大库文件大小，拖累我们网站加载速度。所以Prism.js采用自定义下载。在下载页面定，勾选你所需要高亮的语言、主题和插件，然后点击下载即可。下载地址：http://prismjs.com/download.html

你可以使用插件来给代码添加行号，只需要在pre标签中加上line-numbers类即可。在之前的js代码中添加一行。

当然，我们也可以使用NPM来安装Prismjs：

$ 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);
知识兔

Prism.js主要功能列表

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

压缩后只有2KB的大小（核心）。每种语言定义增加了大约300-500字节。

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

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

由于Prism的插件架构，非常容易扩展而无需修改代码。

突出显示特定的行和/或行范围（需要插件）

显示不可见的字符，如制表符，换行符等（需要插件）

自动链接URL和电子邮件，在评论中使用Markdown链接（需要插件）

计算机