在前端开发中，高亮显示代码是一个经常需要用到的功能。有时候，我们需要在代码文本中标记一些特殊的语言元素，或者是实现代码的语法高亮。这时候，我们可以使用 highlighter.js 这个 npm 包。它是一个轻量级的库，提供了丰富的语法高亮和文本标记的功能。
安装和使用
要使用 highlighter.js，我们可以使用 npm 进行安装：
--- ------- -------------- ------
在我们的项目中，我们需要引入 highlighter.js 的 CSS 样式和 JS 文件：
----- ---------------- ------------------------------------------------------ ------- ----------------------------------------------------------
当我们引入了样式和 JS 文件后，我们就可以使用 highlighter.js 了。比如，我们想要高亮显示一个代码块，我们可以通过以下代码实现：
------ ---- ---- ----------------- ---------------------------------------------------
在这里，我们先引入了 hljs 对象（highlighter.js 提供的默认对象），然后使用 highlightBlock() 方法对 pre 元素中的代码块进行高亮。我们可以在括号中传入我们想要高亮的代码块的 DOM 元素。
语法高亮和标记文本
highlighter.js 不仅可以进行代码的语法高亮，还可以标记特定的文本。我们可以使用 hljs 对象提供的各种方法实现这些功能。
语法高亮
highlighter.js 提供了很多种语言的语法高亮，并且支持自定义语法。常用的语法高亮方法有：
- hljs.highlightBlock(element)：高亮指定元素中的代码块；
- hljs.highlight(language, code)：对指定语言的代码进行高亮；
- hljs.registerLanguage(language, languageFunction)：注册一种新的语言。
比如，我们可以这样来高亮一个 HTML 代码块：
---------- ----------------------------- -------- ----------------------------------------------- -------- ---------
在代码标签中，我们设置了 class="html"，表示这是一段 HTML 代码。然后，在 JS 中，我们使用 highlightBlock() 方法对这段代码进行高亮。
标记文本
如果我们想要标记一段特定的文本，我们可以使用 highlighter.js 提供的 mark() 方法。比如，如果我们想要对某个词语进行标记，我们可以这样来实现：
------ ---- ---- ----------------- -- ----- ---------------- ---- ------------------------------------- ------- ------------------
在这里，我们使用 mark() 方法对 pre 元素中的代码块进行标记。我们可以在括号中传入我们想要标记的词语，也可以传入一个对象，来设置标记的渲染样式：
------------------------------------- ------- - ---------- ------- --------- ---------- -------- ------ ---
在这里，我们使用 mark() 方法对 pre 元素中的代码块进行标记。我们传入一个对象来设置标记的样式。其中，className 表示要添加的 CSS 样式名，accuracy 表示精确匹配方式，element 表示标记的 HTML 元素。
多语言支持
highlighter.js 支持多种语言的语法高亮。比如，我们想要高亮一段 JavaScript 代码，我们可以这样做：
---------- ----------------------------------- -------- ----------------------------------------------- -------- ---------
在代码标签中，我们设置了 class="javascript"，表示这是一段 JavaScript 代码。然后，在 JS 中，我们使用 highlightBlock() 方法对这段代码进行高亮。
结束语
通过这个教程，我们介绍了如何使用 highlighter.js 对代码进行高亮和文本进行标记。highlighter.js 是一个非常灵活的库，支持多种语言和自定义语言，可以帮助开发者更好地显示和呈现代码。希望能够帮助大家更好地实现代码高亮和文本标记的功能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/37123