如果你在前端开发中需要高亮某些关键字或者语句，那么 highlight-overlay 这个 npm 包就能给你提供帮助。这个包的用途是在代码上添加一个覆盖层，以突出显示你选择的内容。 在这篇文章中，我们将学习如何使用这个 npm 包来实现代码高亮效果。
安装
我们可以使用 npm 安装 highlight-overlay。使用以下命令来安装它：
npm install highlight-overlay --save
用法
安装完成后，我们可以通过下面的语句引入 highlight-overlay 依赖：
const highlight = require("highlight-overlay");之后，我们可以自定义高亮的样式，具体的 CSS 样式如下所示：
.highlight-overlay {
position: absolute;
z-index: 1;
pointer-events: none;
background-color: rgba(255, 255, 0, 0.5);
}其中 .highlight-overlay 类名用于定义高亮的样式，你可以根据需要随意更改。
接下来，我们需要为需要高亮显示的元素添加 data-highlight-overlay 属性，以及一个与 highlight-overlay 类名相同的类名，相应的 HTML 代码如下：
<span data-highlight-overlay class="highlight-overlay">code here</span>
这里，空元素标签 <span> 是一个示例，你可以使用任何所需元素来添加代码样式。
最后，我们只需要使用以下代码将 highlight-overlay 应用到我们需要高亮显示的元素上：
highlight.highlightAll();
这个函数将遍历所有带有 data-highlight-overlay 属性的元素，为他们添加高亮覆盖层。
示例
现在，我们准备一个示例，来演示 highlight-overlay 的使用。
首先，我们创建一个 HTML 文件 index.html，然后添加以下 HTML 代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
------------------------ ----------
-------
------------------ -
--------- ---------
-------- --
--------------- -----
----------------- --------- ---- -- -----
-
--------
-------
------
-------------------------
---
---------------- -----
----------------------
-------------------------
---------
-
--- ----- ---------------------- -------------------------
---------
--
----
------- ------------------------
-------
-------接下来，我们创建一个 JavaScript 文件 index.js，并在其中添加以下内容：
const highlight = require("highlight-overlay");
highlight.highlightAll();最后，我们启动 HTTP 服务器来浏览我们的示例：
python -m SimpleHTTPServer 8000
然后在你的浏览器中输入 http://localhost:8000/，你就能看到我们的示例页面了，其中我们刚刚添加的高亮效果对应的就是黄色的覆盖层。
总结
在这篇文章中，我们学习了如何使用 highlight-overlay 这个 npm 包来实现高亮代码的效果。我们学会了如何使用 highlightAll() 函数，以及如何添加 data-highlight-overlay 属性来为需要高亮的元素准备添加高亮覆盖层。希望这篇文章能帮助开发人员们更好地使用 highlight-overlay 包来高效的实现代码高亮。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005564681e8991b448d327b