简介
单击高亮是一个常见的前端需求，例如我们要在一篇文章中标记出某些特定的关键词，使其与其他文字有所区分。在此过程中，使用鼠标选择并高亮关键词是一个比较繁琐的操作。single-click-highlightable 是一个 npm 包，它能够通过单击选中文本并进行高亮。本文将详细介绍 single-click-highlightable 的使用方法。
安装
single-click-highlightable 是一个 npm 包，我们可以通过 npm install 命令进行安装。
npm install single-click-highlightable --save
此外，我们还需要安装并引入 highlight.js 库。highlight.js 是一款用于高亮显示代码的 JavaScript 库，它支持多种语言的代码高亮，并且提供了非常简单易用的 API。
npm install highlight.js --save
使用方法
接下来，我们将详细介绍 single-click-highlightable 的使用方法。
引入
首先，我们需要在项目中引入 single-click-highlightable 和 highlight.js 库。
import SingleClickHighlightable from "single-click-highlightable"; import hljs from "highlight.js";
如果你使用的是 CommonJS 或者 AMD 模块化规范，则可以使用以下方式引入：
const SingleClickHighlightable = require("single-click-highlightable");
const hljs = require("highlight.js");初始化
接着，我们需要初始化 SingleClickHighlightable 对象，在此过程中可以指定一些配置参数。
const sc = new SingleClickHighlightable({
containerId: "container", // 要使用单击高亮的容器的 ID
highlightClass: "my-highlight", // 高亮的 CSS 类名
highlightCallback: (highlight) => {
// 高亮时的回调函数，可以在此处做一些额外的操作
hljs.highlightBlock(highlight);
},
});其中 containerId 表示要使用单击高亮的容器的 ID。在这个容器中，所有的文本都会被加上单击高亮的功能。highlightClass 表示高亮文字的 CSS 类名，我们需要在 CSS 中定义这个类名的样式。highlightCallback 是高亮时的回调函数，我们可以在这个函数中做一些额外的操作。例如，可以使用 highlight.js 库将高亮的代码进行语法高亮显示。
开始使用
最后，在页面加载完成后，我们可以通过以下方式启动 SingleClickHighlightable 对象。
sc.start();
这样，我们就可以在页面上对任意文本进行单击高亮了。只需要选中某段文本，然后单击即可进行高亮。
示例代码
以下是一个完整的单击高亮的示例代码。
-- -------------------- ---- -------
------ ------------------------ ---- -----------------------------
------ ---- ---- ---------------
----- -- - --- --------------------------
------------ ------------
--------------- ---------------
------------------ ----------- -- -
-------------------------------
--
---
-----------.my-highlight {
background-color: yellow;
}-- -------------------- ---- -------
---- ---------------
---
----- ----- ----- --- ----- ----------- ---------- ----- --- ------ -----
---- ----- ----------- ------- ----- --------- ----- --- ------- ------ --
---- -- -------- ---------- ------ ------ -------- -- --- ----- -------
--------- --- ----- ---------- -------- -- --- --------- ---- ------ ---
------ --- --- ------ ------ -- -- --------- ------- ---- ------- -------
---------- --- ---- ----- ------------ -------- ----- --------- -------- --
----- -- --------- ----- -- ------ --------
----
---
----- -- ----- --- ---- --------- -------- ---- --------- ----- --- -----
-------- --- --------- ---- --------- -- -- ----- --------- ------- -----
--- ------ ------ ----------- -- --------- ----- ------ --------- ------ --
----- ------ --------- -------- ------- -------- ---- -- ------- -----
--------- ------ ----- ---- ---- --- ------ -------- --------- ----- ---
--- ---- --- --------- --------- ------- ---- ---- - ----- --------
----------
----
------这段代码通过在 container 容器中加入 my-highlight 的 CSS 类名，定义了被单击高亮时背景色为黄色。此外，当点击某段文本时，通过 highlight.js 库进行语法高亮。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d5481e8991b448db199