Prism

Prism

来源
作者
  • Lea Verou < https://lea.verou.me >
许可证
  • MIT

Prism: 轻量化、强大、优雅的语法高亮工具

命名空间

钩子
语言

成员

(static) disableWorkerMessageHandler : boolean

来源
默认值
  • false

默认情况下，如果 Prism 在一个 Web 工作线程中，它会假定它自己创建了这个工作线程，因此它使用 `addEventListener` 与其父实例通信。但是，如果你自己手动在工作线程中使用 Prism，则不希望它执行此操作。

通过将此值设为 `true`，Prism 将不会向工作线程添加自己的侦听器。

你显然必须在 Prism 执行之前更改此值。为此，可以在加载 Prism 脚本之前向全局范围添加一个空 Prism 对象，如下所示

window.Prism = window.Prism || {};
Prism.disableWorkerMessageHandler = true;
// Load Prism's script
类型
  • boolean

(static) manual : boolean

来源
默认值
  • false

默认情况下，Prism 将尝试在页面加载完毕后高亮显示当前页面上的所有代码元素（通过调用 Prism.highlightAll）。如果你想异步加载其他语言或插件，这可能是个问题。

通过将此值设为 `true`，Prism 将不会自动高亮显示页面上的所有代码元素。

你显然必须在自动高亮显示开始之前更改此值。为此，可以在加载 Prism 脚本之前向全局范围添加一个空 Prism 对象，如下所示

window.Prism = window.Prism || {};
Prism.manual = true;
// add a new <script> to load Prism's script
类型
  • boolean

方法

(static) highlight(text, grammar, language) → {string}

来源

底层函数，只有在你了解自己正在做什么时才使用。它接受一个文本字符串作为输入以及要使用的语言定义，并返回一个带有生成 HTML 的字符串。

将运行以下钩子

  1. before-tokenize
  2. after-tokenize
  3. wrap：在每个 Token 上。
示例
Prism.highlight('var foo = true;', Prism.languages.javascript, 'javascript');
参数
名称 类型 描述
text 字符串

要高亮显示的代码字符串。
grammar 语法

包含要使用的 token 的对象。

通常为类似 Prism.languages.markup 的语言定义。
语言 字符串

传递给 grammar 的语言定义名称。
返回

高亮的 HTML。

类型
字符串

(static) highlightAll(asyncopt, callbackopt)

来源

这是 Prism API 中最高级别的函数。它获取所有具有 .language-xxxx 类的元素，然后对它们中的每一个调用 Prism.highlightElement。

这等效于 Prism.highlightAllUnder(document, async, callback)。

参数
名称 类型 属性 默认值 描述
async boolean <可选>
 false

与 Prism.highlightAllUnder 中相同。
callback HighlightCallback <可选>

与 Prism.highlightAllUnder 中相同。

(static) highlightAllUnder(container, asyncopt, callbackopt)

来源

获取 container 的所有后代元素，它们具有的 .language-xxxx 类，然后对它们中的每一个调用 Prism.highlightElement。

将运行以下钩子

  1. before-highlightall
  2. before-all-elements-highlight
  3. 对于每个元素，执行 Prism.highlightElement 的所有挂钩。
参数
名称 类型 属性 默认值 描述
容器 ParentNode

根元素，它具有 .language-xxxx 类的后代元素将被高亮显示。
async boolean <可选>
 false

是否使用 Web Worker 以异步方式高亮显示每个元素。
callback HighlightCallback <可选>

对其高亮显示完成后，将在每个元素上调用的可选回调。

(static) highlightElement(element, asyncopt, callbackopt)

来源

高亮显示单个元素内的代码。

将运行以下钩子

  1. before-sanity-check
  2. before-highlight
  3. 所有 Prism.highlight 挂钩。如果 async 为 true，则这些挂钩将由异步工作进程运行。
  4. before-insert
  5. after-highlight
  6. complete

如果元素不包含任何文本或没有针对元素语言加载任何语法，则会跳过上述一些挂钩。

参数
名称 类型 属性 默认值 描述
元素 Element

包含代码的元素。它必须具有 language-xxxx 类才能被处理，其中 xxxx 是一个有效的语言标识符。
async boolean <可选>
 false

是否使用 Web Worker 以异步方式高亮显示元素，以提升性能并避免在高亮显示超大代码块时阻塞 UI。此选项在默认情况下处于禁用状态。

注意：所有必需的语言定义才能突出显示代码都必须包含在主 prism.js 文件中，用于异步高亮的代码才能发挥作用。您可以在 下载页面 构建您自己的软件包。
callback HighlightCallback <可选>

突出显示完成后要调用的可选回调。当 async 为 true 时，它非常有用，因为在这种情况下，突出显示将异步完成。

(static) tokenize(text, grammar) → {TokenStream}

来源

这是 Prism 的核心，也是您可以使用的最低级别函数。它接受一段文本作为输入，以及要使用的语言定义，并且返回一个包含标记化代码的数组。

当语言定义包括嵌套标记时，该函数将对每个标记递归调用。

该方法在其他情况下也可用，作为非常粗略的解析器。

示例
let code = `var foo = 0;`;
let tokens = Prism.tokenize(code, Prism.languages.javascript);
tokens.forEach(token => {
    if (token instanceof Prism.Token && token.type === 'number') {
        console.log(`Found numeric literal: ${token.content}`);
    }
});
参数
名称 类型 描述
text 字符串

要高亮显示的代码字符串。
grammar 语法

包含要使用的 token 的对象。

通常为类似 Prism.languages.markup 的语言定义。
返回

字符串和标记的数组，一个标记流。

类型
TokenStream