前言
前端开发中，我们经常需要美化代码的展示，高亮代码中的关键词，让代码更加易读、易懂。gulp-highlight 是一个用来高亮代码的 npm 包，它支持超过 120 种编程语言，是前端开发中十分常用的工具。本文将详细介绍如何使用这个包。
安装 gulp 和 gulp-highlight
在使用 gulp-highlight 前，需要先安装 gulp，如果已经安装过 gulp，可以跳过这一步。
npm install -g gulp-cli # 全局安装 gulp-cli npm install gulp --save-dev # 本地安装 gulp
接下来，我们安装 gulp-highlight：
npm install gulp-highlight --save-dev
使用 gulp-highlight
gulp 需要一个 gulpfile.js 文件来描述任务，下面是一个简单示例。
const gulp = require('gulp');
const highlight = require('gulp-highlight');
gulp.task('highlignt', function() {
return gulp.src('./src/*.js') // 匹配所有 .js 文件
.pipe(highlight()) // 调用 highlight() 方法
.pipe(gulp.dest('./dist/')); // 输出到文件夹
});在 gulpfile.js 中，我们定义了一个名为 highlight 的任务，这个任务会匹配所有的 .js 文件，然后通过 highlight() 方法对这些文件进行高亮处理，最后将处理后的文件输出到 ./dist/ 目录。
注意：在 gulpfile.js 中需要引入 gulp 和 gulp-highlight 两个包。
高级用法
指定要高亮的语言
gulp-highlight 支持超过 120 种编程语言的高亮，我们可以通过传递参数，来指定要高亮的语言。
.pipe(highlight({
language: 'javascript' // 指定要高亮的语言
}))指定样式
gulp-highlight 支持自定义样式，我们可以通过指定样式文件的路径，来自定义高亮的样式。
.pipe(highlight({
style: './style/monokai.css' // 指定样式文件路径
}))深度定制
以上两个用法已经能够满足我们大部分的需求，但如果你需要深度定制 gulp-highlight，则可以使用 highlight.configure() 方法。
-- -------------------- ---- -------
---------------------
------------ --- -- --- ----- --
------ ------ -- ---- -------- -----
---------- - -- -------
--------------- -
-------- ---------------
-
-
---示例代码
-- -------------------- ---- -------
----- ---- - ----------------
----- --------- - --------------------------
-- ---- --- -------- --------------------
---------------------- ---------- -
------ ----------------------
-----------------
--------- -------------
------ ---------------------
---
----------------------------
---
-- -- ------- ------------------ ----- --
----------------------------- ---------- -
---------------------
------------ ---------- -- --- ----- --
---------- - -- -------
------- -
-------- ---------------
-
-
---
------ --------------------------
-----------------
--------- --------
---
----------------------------
---结尾
以上就是使用 gulp-highlight npm 包的教程，希望可以帮助到大家。如果有问题或建议，欢迎在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedad0bb5cbfe1ea0610bc4