在前端开发过程中，代码的高亮展示可以使阅读代码更加清晰明了，有利于代码的编写和阅读。在实现代码高亮的过程中，有一个非常常用的 npm 包：highlightjs-loader。
highlightjs-loader 是一个 webpack loader，可以使得在 webpack 构建过程中使用 highlight.js 对代码进行高亮。
本文将介绍 highlightjs-loader 的基本使用方法，如何针对特定语言进行高亮，以及如何自定义样式。
安装
在使用 highlightjs-loader 前，需要先在项目中安装仅 highlight.js 的 npm 包：
--- ------- ------------ ----------
安装完成后，可以安装 highlightjs-loader：
--- ------- ------------------ ----------
基本使用
将 highlightjs-loader 加入 webpack 配置文件的 module.rules 中，如下所示：
------- -
------ -
-
----- --------
---- -
--------------------
-
-
-
-配置完成后，webpack 会使用 highlightjs-loader 对项目中的所有 .js 文件进行高亮展示。
针对特定语言高亮
使用 highlightjs-loader 可以对多种编程语言进行高亮。配置方法如下：
------- -
------ -
-
----- --------
---- -
-
------- ---------------------
-------- -
---------- -------------- -------------
-
-
-
-
-
-options.languages 是一个数组，包含需要进行高亮的语言。
自定义样式
可以通过自定义样式，调整高亮展示的风格。
有两种方法可以实现自定义样式：
方法一：直接添加样式
样式可以通过以下方式添加：
----- ---------------- -----------------------------------------------------------------------------------
方法二：通过安装主题包的方式添加样式
首先安装主题包的 npm 包：
--- ------- ----------------------- ----------
然后将主题包中的样式文件引入：
------ ---------------------------------
示例代码
以 Vue 项目为例，以下是一个使用 Vue 和 highlightjs-loader 的示例代码：
----------
---------- ------------- ---- ---------------
-----------
--------
------ ---- ---- ------------------------
------ ---------- ---- ----------------------------------------
------ ---------------------------------
----------------------------------- ------------
------ ------- -
----- ------------
------ -
----- ------
--
------- -- -
-----------------
--
------- -- -
-----------------
--
-------- -
--------- -- -
----------------- -- -
----- ----- - ----------------------------------
--- ---- - - -- - - ------------- ---- -
------------------------------
-
---
-
-
--
---------以上代码实现了在 Vue 中使用 highlightjs-loader 对代码进行高亮展示，并使用自定义样式。
总结
提高代码某亮度不仅仅是为了好看，更是提升代码可读性和易维护性的重要方法。本文介绍了怎样使用 highlightjs-loader 对代码进行高亮，并实现对特定语言进行高亮、自定义样式等功能，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/61031