全部功能列表

最小化和 gzipped 压缩后仅 (内核) 2KB。每种语言定义大约添加 300-500 字节。
提倡良好的作者习惯。其他高亮器鼓励甚至强制您使用语义错误的元素，例如 <pre>（单独使用）或 <script>。Prism 强制您使用正确的元素标记代码：<code>。对于内联代码单独使用，或者对于代码块在 <pre> 中使用。此外，语言必须通过 HTML5 草案中建议的方式定义：通过 language-xxxx 类。
language-xxxx 类可以被继承。这意味着如果多个代码段具有相同的语言，您只需要在一个常见祖先中定义它一次。
如果可用，支持与 Web Workers 并行运行。默认情况下禁用（为什么？）。
由于 Prism 的插件架构，非常易于扩展而不修改代码。源代码中的多个挂钩将被分散。
极易定义新语言。您需要了解的只是正则表达式。
所有样式均通过 CSS 完成，并且具有合理类名，而不是丑陋、命名空间化或简短的无意义名称。
广泛支持浏览器：Edge、IE11、Firefox、Chrome、Safari、Opera、大多数移动浏览器。
高亮显示嵌入式语言（例如，HTML 中的 CSS、HTML 中的 JavaScript）。
高亮显示内联代码，而不仅仅是代码块。
它不会强制你使用任何 Prism 特定的标记，甚至 Prism 特定的类名，它只使用你本应使用的标准标记。所以，你可以先试用一段时间，如果不喜欢，就移除它，不会留下任何痕迹。
高亮特定行和/或行范围（需要插件）。
显示不可见字符，比如制表符、换行符等（需要插件）。
自动链接 URL 和电子邮件，在注释中使用 Markdown 链接（需要插件）。

基本用法

你需要在页面中包含你下载的 prism.css 和 prism.js 文件。示例

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

Prism 尽力鼓励良好的创作习惯。因此，它仅适用于 <code> 元素，因为不使用 <code> 元素标记代码在语义上无效。根据 HTML5 规范，定义代码语言的推荐方法是 language-xxxx 类，这也是 Prism 使用的方法。此外，Prism 还支持一个较短的版本：lang-xxxx。

标记代码块的推荐方法（对语义和 Prism 而言）是带有内部 <code> 元素的 <pre> 元素，如下所示

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

如果你使用该模式，<pre> 将自动获取 language-xxxx 类（如果它还没有），并将被样式化为代码块。

内联代码段以这种方式完成

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

注意：你必须转义 <code> 元素（代码块和内联片段）中的所有 < 和 & 字符，分别使用 < 和 &，否则浏览器可能会将其解释为 HTML 标签或实体。如果你有大段 HTML 代码，可以使用未转义标记插件来解决此问题。

语言继承

然而，为了使事情更轻松，Prism 假定继承了语言类。因此，如果多个 <code> 元素具有相同的语言，则可以在它们的共同祖先之一上添加 language-xxxx 类。这样，你还可以通过在 <body> 或 <html> 元素上添加 language-xxxx 类来定义一个文档范围内的默认语言。

如果不想高亮继承其语言的一个 <code> 元素，你可以向其添加 language-none 类。还可以继承 none 语言以禁用包含该类的元素及其所有子元素的高亮。

如果不想高亮，但仍需使用插件，如显示不可见字符，请改用 language-plain 类。

手动高亮

如果要阻止自动高亮所有元素，而是使用 API，可以在触发 DOMContentLoaded 事件之前将 Prism.manual 设置为 true。通过设置包含 Prism 核心程序的 <script> 元素上的 data-manual，此操作会自动执行。示例

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

或

<script>
window.Prism = window.Prism || {};
window.Prism.manual = true;
</script>
<script src="prism.js"></script>

与 CDN 的交互

结合使用 CDN，我们建议使用自动加载器插件，其可在需要时自动加载语言。

自动加载器的安装程序，如下所示。当然，你也可以添加自己的主题。

<!DOCTYPE html>
<html>
<head>
	...
	<link href="https://{{cdn}}/[email protected]/themes/prism.css" rel="stylesheet" />
</head>
<body>
	...
	<script src="https://{{cdn}}/[email protected]/components/prism-core.min.js"></script>
	<script src="https://{{cdn}}/[email protected]/plugins/autoloader/prism-autoloader.min.js"></script>
</body>
</html>

请注意，以上代码示例中的链接充当占位符。你必须用你自己选择的 CDN 中有效的链接替换它们。

提供 PrismJS 的 CDN，例如 cdnjs、jsDelivr 和 UNPKG。

与 Webpack、Browserify 及其他打包程序的交互

如果你想将 Prism 与一个打包程序配合使用，请使用 npm 安装 Prism

$ npm install prismjs

然后可以将 import 导入到你的包中

import Prism from 'prismjs';

为了方便仅使用所需语言和插件来配置你的 Prism 实例，请使用 Babel 插件 babel-plugin-prismjs。这样做可以让你加载满足你需求的最小语言和插件。有关配置详情，请参阅该插件的文件。

与 Node 的交互

如果你想在服务器上或通过命令行上使用 Prism，同样可以使用 Node.js 使用 Prism。如果你尝试使用不兼容浏览器端 JS 的环境（如 AMP 页面）生成静态 HTML 页面，这可能非常有用。

示例

const Prism = require('prismjs');

// The code snippet you want to highlight, as a string
const code = `var data = 1;`;

// Returns a highlighted HTML string
const html = Prism.highlight(code, Prism.languages.javascript, 'javascript');

加载实用程序 prismjs 将加载默认语言：markup、css、clike 和 javascript。你可以使用 loadLanguages() 实用程序加载更多语言，它会自动处理任何必要的依赖项。

示例

const Prism = require('prismjs');
const loadLanguages = require('prismjs/components/');
loadLanguages(['haml']);

// The code snippet you want to highlight, as a string
const code = `= ['hi', 'there', 'reader!'].join " "`;

// Returns a highlighted HTML string
const html = Prism.highlight(code, Prism.languages.haml, 'haml');

注意：不要将 loadLanguages() 与 Webpack 或其他打包程序一同使用，否则 Webpack 会包含所有语言和插件。使用上述 Babel 插件。

注意：loadLanguages() 会忽略未知语言，并向控制台记录警告消息。你可以通过设置 loadLanguages.silent = true 来禁止显示警告。

支持的语言

这是 Prisma 目前支持的所有种语言的列表，以及其对应的别名，可在 language-xxxx (或 lang-xxxx) 类中代替 xxxx 使用

找不到你正在寻找的语言？申请！

使用情况

示例