当我们需要在前端应用中展示代码时，如何实现高亮代码关键字、保留代码格式等功能是一个常见的问题。幸运的是，我们可以使用 npm 包 highlight 来解决这个问题。
本篇文章将为大家提供 highlight 包的使用教程，深入介绍其相关特性，并提供具体的代码示例和指导意义。
1. 安装 highlight 包
首先，我们需要使用 npm 安装 highlight 包。命令如下：
npm install highlight.js --save
需要注意的是，highlight 包有多种语言的支持，我们可以根据需要选择安装相应语言的包。例如，若只需使用 javascript 和 html 的高亮功能，则可使用以下命令：
npm install highlight.js/lib/languages/javascript.js highlight.js/lib/languages/html.js --save
2. 引入 highlight 包
在我们的前端应用中，需要在 HTML 文件中引入 highlight 包和需要高亮的代码，然后在 JavaScript 文件中调用 highlight 包的相关功能。
引入 highlight 包和 css 样式的方式如下：
<link rel="stylesheet" href="node_modules/highlight.js/styles/default.css"> <script src="node_modules/highlight.js/lib/highlight.js"></script>
3. 配置 highlight 包
在引入 highlight 包后，我们需要配置它所支持的语言和样式。
hljs.configure({
languages: ['javascript', 'html'],
style: 'default'
});languages 属性用于配置 highlight 包支持的语言列表，如上述代码配置支持 javascript 和 html 的高亮。我们还可以使用 registerLanguage 方法自定义语言支持。
style 属性用于配置样式，我们可以在 node_modules/highlight.js/styles 中找到相应的样式文件。
4. 使用 highlight 包
在配置好 highlight 包后，我们可以使用其提供的方法来高亮代码。
<pre><code class="javascript"> var a = 'hello world'; console.log(a); </code></pre>
在 HTML 中，我们需要使用 <pre> 和 <code> 标签来包裹需要高亮的代码。其中，<code> 标签需要指定高亮的语言（即 class 属性），如上述代码给出了 javascript 语言的高亮。
接着，在 JavaScript 中调用 highlight 包的相关方法即可实现高亮：
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('code').forEach((block) => {
hljs.highlightBlock(block);
});
});上述代码做了以下几件事：
- 等待 HTML 文件加载完成，等同于 jQuery 中的
$(document).ready()。 - 找到所有
<code>标签。 - 对每个
<code>标签调用highlightBlock方法实现高亮。
通过以上配置和代码，我们就可以实现前端代码高亮的功能了。
5. 代码示例
下面是一个完整的示例，用于高亮 javascript 和 html 的代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- ----------------------------------------------------
------- ----------------------------------------------------------
------- ---------------------------------------------------------------------
------- ---------------------------------------------------------------
--------
----------------
---------- -------------- --------
------ ---------
---
--------------------------------------------- ------- -- -
------------------------------------------------- -- -
---------------------------
---
---
---------
-------
------
---------- -------------------
--- - - ------ -------
---------------
-------------
---------- -------------
---- ------------------
----------- -- -- ------------
------- -- - ------ ------------
------
-------------
-------
-------打开以上代码的 HTML 文件，即可看到高亮的效果。
6. 总结
通过本篇文章，我们学习了如何使用 highlight 包实现前端代码的高亮功能。同时，我们还了解了 highlight 包的语言和样式配置，以及在 HTML 和 JavaScript 中的使用方法。
在前端应用中，展示代码是一个基本而重要的功能，希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/75015