介绍
highlight.js-tokens 是一个在 JavaScript 中使用 highlight.js 包的解析器。它可以将代码解析成 highlight.js 高亮所需要的 tokens 序列。
如果你想在页面中渲染比 <pre> 标签或 <code> 标签更具可读性的代码块，或者你是一个开发者，正在寻找一种简单、易于使用的方法来将代码解析成 tokens 序列以进行自定义渲染或其他用途，那么 highlight.js-tokens 可能是你需要的解决方案。
安装
首先，你需要安装 highlight.js-tokens npm 包。你可以在你的项目中运行以下命令安装它：
--- ------- ------------------- ------
使用
一旦你已经安装了 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 函数，就可以解析自定义语言的代码了。这是一个例子：
------ - -------- - ---- ---------------------- ----- ---- - ----- --- - -- ------ ----- ------- - - --------- --- -- ----- ------ - -------------- --------- --------------------
这将会输出以下 tokens 形式的结果：
- - ----- --------- ------ --- -- - ----- --------- ------ ---- - -- - ----- --------------- ------ ----- -- - ----- --------- ------ --- - -
总结
highlight.js-tokens 提供了一种简单、灵活、易于使用的方法来将代码解析成 tokens 序列。你可以将其作为一个函数调用，传递一个代码字符串并返回一个 tokens 序列数组，或者你可以在流模式下使用它，以便逐块解析大型数据。
你可以使用选项对象来自定义处理程序、自定义语法或提供其他定制选项。这让 highlight.js-tokens 变得非常灵活，可以满足大多数开发者的需求。
希望这篇文章对你有帮助，如果你有任何问题或反馈，请在评论区留言。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedae94b5cbfe1ea0610e74