介绍
highlight.js-tokens 是一个在 JavaScript 中使用 highlight.js 包的解析器。它可以将代码解析成 highlight.js 高亮所需要的 tokens 序列。
如果你想在页面中渲染比 <pre> 标签或 <code> 标签更具可读性的代码块，或者你是一个开发者，正在寻找一种简单、易于使用的方法来将代码解析成 tokens 序列以进行自定义渲染或其他用途，那么 highlight.js-tokens 可能是你需要的解决方案。
安装
首先，你需要安装 highlight.js-tokens npm 包。你可以在你的项目中运行以下命令安装它：
npm install highlight.js-tokens --save
使用
一旦你已经安装了 highlight.js-tokens 包，你就可以在你的代码中使用它了。
字符串模式
highlight.js-tokens 最简单的用法是将它作为一个函数来调用，并将需要解析的代码字符串作为其唯一参数。它返回一个 tokens 序列数组，可以供使用 highlight.js 和其他库和插件使用。
例如，假设你想解析下面的 HTML 代码块:
-- -------------------- ---- ------- --------- ----- ------ ------ ----------------------- ------- ------ --------- ----------- ------- -------展开代码
你可以使用以下代码片段将其解析成一个 tokens 序列：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------------- ----- ---- - ---------- ----- ------ ------ ----------------------- ------- ------ --------- ----------- ------- --------- ----- ------ - --------------- --------------------展开代码
解析结果将会是一个数组，包含所有的 tokens 序列：
-- -------------------- ---- ------- - - ----- --------- ------ ---------- ------ -- - ----- ------------- ------ ---- -- - ----- --------- ------ -------- -- - ----- ------------- ------ --- - -- - ----- --------- ------ -------- -- - ----- ------------- ------ --- - -- - ----- --------- ------ --------- -- - ----- ---------- ------ ---------- -- - ----- --------- ------ ---------- -- - ----- ------------- ------ --- - -- - ----- --------- ------ --------- -- - ----- ------------- ------ --- - -- - ----- --------- ------ -------- -- - ----- ------------- ------ --- - -- - ----- --------- ------ ------ -- - ----- ---------- ------ ------ ------- -- - ----- --------- ------ ------- -- - ----- ------------- ------ --- - -- - ----- --------- ------ --------- -- - ----- ------------- ------ ---- -- - ----- --------- ------ --------- - -展开代码
流模式
除了字符串模式之外，highlight.js-tokens 还支持 stream 模式，你可以像处理文件一样去处理输入，并且在解析的同时生成 tokens 序列。
为了在 stream 模式下使用 highlight.js-tokens，你需要创建一个可读流，该流将在每个 chunk 内部返回解析后的 tokens 序列。可读流的 chunk 是一个字符串或 Buffer，可以是完整的代码字符串，也可以是代码文件的一部分。
以下是使用 stream 模式解析代码的简单示例：
-- -------------------- ---- ------- ------ - ----------- - ---- ---------------------- ------ -- ---- ----- ----- -------- - --------------- ----- ------ - ----------------------------- - --------- ------- --- ------------------ ----- -- -------------------- ----- ------ - --- -------------- ------ ----------- -------- -- - -------------------- -- ------------ ----- -- ------------------- ---------- -- -- ---------------- -- ---------- --------------------展开代码
在这个例子中，当读取器读取 example.html 中的数据块时，可读流会自动将其解析为代码的 tokens 序列，并返回解析结果。
定制
你可以在 highlight.js-tokens 中定制处理程序，例如更改某些 tokens 类型的名称或值，或自定义处理代码字符串的方法。
为此，你可以指定自己的 options 对象，该对象将传递给 tokenize 函数。这个选项对象有以下属性：
| 属性 | 类型 | 默 认 | 描 述 |
|---|---|---|---|
language |
string |
null |
语言的名称，可以是 highlight.js 中支持的任何语言 |
handlers |
object |
{} |
处理程序的对象，用于处理 tokens 序列中的每个 tokens |
batch |
number |
null |
批量解析的数据块大小（流模式使用） |
source |
string |
null |
原始代码的文件名或文件路径（流模式使用） |
自定义处理程序
处理程序允许你自定义 tokens 序列的处理方法。例如，你可能想将所有字符串类型的 token 转换为大写或小写。
以下是一个自定义处理程序的例子，它将所有字符串类型的 token 转为大写：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------------- ----- ---- - ------ --- - ------- ---------- ----- -------- - - ------------- - ------ - ----- ----------- ------ ------------------------- -- - -- ----- ------ - -------------- - -------- --- --------------------展开代码
在这个例子中，我们定义了一个名为 handlers 的选项对象并将其传递给 tokenize 函数。我们在 handlers 对象中定义了一个 string 处理程序，它将所有类型为 string 的 token 转换为大写并返回新 tokens。
自定义语法
如果 highlight.js 中的语言定义不符合你的需要，或者你有自己定义的语言，你可以在 highlight.js-tokens 中自定义新的语法。
你可以通过传递新的语言选项来自定义新语法。这个选项对象应该具有以下属性：
| 属性 | 类型 | 描 述 |
|---|---|---|
id |
string |
语言的唯一识别符 |
scopeName |
string |
用于与 highlight.js 中的语言定义配置文件匹配的范围名称 |
aliases |
array |
与此语言相关的别名 |
contains |
array |
该语言定义的 tokens 序列，及每个 token 的语法信息和样式信息 |
keywords |
object |
该语言定义的关键字及其样式信息 |
case_insensitive |
boolean |
指定检查关键字是否区分大小写（默认为 false） |
subLanguage |
string |
可选，用于指定包含在这个语言中的子语言，以便在其语法中解析代码 |
以下是一个自定义语法的例子。
假设我们自己定义了一个名为 foo 的语言，它具有一种特殊的类型的 tokens，即 foobar-ended，它表示经过特殊操作后的字符串结尾标记。
我们可以借助 highlight.js-tokens 定义这个语言。首先，我们需要在 highlight.js 中定义一个规则，以便它可以高亮我们需要的 tokens：
-- -------------------- ---- ------- ---------------------------- -- -- -- --------- - - ---------- --------- ------ ---- ---- ---- --------- - - ------ ------- ---- ------- ------------ ------ - - -- - ---------- --------- ------ ---- ---- ---- ------------- ----- ----------- ----- --------- - - ---------- --------------- ------ ------ ---- ----- - - - - ----展开代码
然后，我们可以定义一个名为 foo 的新语言选项，这个选项可以告诉 highlight.js-tokens 如何解析我们的语言。我们可以将以下代码添加到我们的项目中：
-- -------------------- ---- ------- ----- --- - - --- ------ ---------- ------------- -------- -------- --------- - - ---------- --------------- ------ ------ ---- ----- -- - ---------- --------- ------ ---- ---- ---- --------- - - ------ ------- ---- ------- ------------ ------ - - - - --展开代码
最后，我们只需要传递自定义语言选项到 tokenize 函数，就可以解析自定义语言的代码了。这是一个例子：
import { tokenize } from 'highlight.js-tokens'; const code = "`foo ${1 + 1} bar`"; const options = { language: foo }; const tokens = tokenize(code, options); console.log(tokens);
这将会输出以下 tokens 形式的结果：
[ { type: 'string', value: '`' }, { type: 'string', value: 'foo ' }, { type: 'foobar-ended', value: 'bar' }, { type: 'string', value: '`' } ]
总结
highlight.js-tokens 提供了一种简单、灵活、易于使用的方法来将代码解析成 tokens 序列。你可以将其作为一个函数调用，传递一个代码字符串并返回一个 tokens 序列数组，或者你可以在流模式下使用它，以便逐块解析大型数据。
你可以使用选项对象来自定义处理程序、自定义语法或提供其他定制选项。这让 highlight.js-tokens 变得非常灵活，可以满足大多数开发者的需求。
希望这篇文章对你有帮助，如果你有任何问题或反馈，请在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedae94b5cbfe1ea0610e74
