快速地在网页中实现代码高亮是前端开发的常见需求之一，而 @gerhobbelt/highlight.js 是一个非常方便易用的 npm 包，它可以快速地为代码实现高亮效果。下面，我们来详细介绍如何使用 @gerhobbelt/highlight.js。
安装
在开始使用 @gerhobbelt/highlight.js 之前，我们需要先安装它。安装可以通过 npm 客户端来完成，执行以下命令即可：
npm install @gerhobbelt/highlight.js
安装完成后，我们可以在项目中引用该包。
引用
在需要使用代码高亮的页面中引入 @gerhobbelt/highlight.js 的样式文件和 JavaScript 文件。推荐使用 CDN 引入，可以大大加快网页的加载速度。代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- --------------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------------------
-------
------
---- ------------- ---
-------
-------其中，version 表示你需要使用的 @gerhobbelt/highlight.js 版本号。
使用
引入 @gerhobbelt/highlight.js 文件后，我们就可以对页面中的代码进行高亮了。下面是一个简单的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- --------------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------------------
-------
------
---------- ----------- ------------
--- -------- - ------- --------
----------------------
-------------
-------------------------------------
-------
-------这段代码实现了对一段 JavaScript 代码进行高亮。其中使用了 <pre> 和 <code> 标签，class 属性中指定了需要高亮的语言类型（JavaScript）。
在页面加载完成后，我们需要调用 hljs.highlightAll(); 方法来实现高亮效果。
自定义样式
@gerhobbelt/highlight.js 为代码高亮提供了默认的样式，但如果我们想要使用自定义的样式，也非常简单。在引入 @gerhobbelt/highlight.js 样式文件之后，我们可以在自己的样式文件中修改对应的样式。示例代码如下：
-- -------------------- ---- -------
-- ----- --
----- -
----------------- --------
------- --- ----- -----
-------- -----
---------- -----
------------ --------- -------- ----------
-
------------- -
------ -----
-在这里，我们修改了代码块背景色、边框、内边距、字体大小及字体等多项样式。同时，我们也修改了注释的颜色，使其更加醒目。
总结
通过本文的介绍，我们了解了如何使用 @gerhobbelt/highlight.js 在网页中实现代码高亮。除此之外，我们也学习了如何自定义样式以及如何引用 @gerhobbelt/highlight.js。掌握了这些知识，我们就可以更加方便地实现代码高亮的需求，提高工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f02c870403f2923b035bd70