简介
gulp-highlight-code 是一个用于在前端开发中高亮代码的 npm 包，它是基于 gulp 和 highlight.js 来实现的。高亮代码能够让代码更加清晰易懂，更具有可读性，对于提升代码质量和开发效率都有很大的帮助。
安装
使用 npm 安装：
npm install gulp-highlight-code --save-dev
使用方法
1. 引入
在 gulpfile.js 文件中引入 gulp-highlight-code。
const highlight = require('gulp-highlight-code');2. 使用
使用 gulp-highlight-code 就像使用其他的 gulp 插件一样：
gulp.task('highlight', function () {
return gulp.src('src/**/*.js')
.pipe(highlight())
.pipe(gulp.dest('dist'));
});这样就会将 src 目录下的所有 js 文件高亮代码后存入 dist 目录下。
指定高亮语言：
如果你的代码不是 JavaScript，你可以通过传入一个参数来指定高亮语言：
gulp.task('highlight', function () {
return gulp.src('src/**/*.html')
.pipe(highlight({ language: 'html' }))
.pipe(gulp.dest('dist'));
});gulp-highlight-code 支持 185 种编程语言，你可以在 highlight.js 官网 上查看所有支持的语言。
3. 自定义主题
gulp-highlight-code 有一个内置的默认主题，但是你可以使用自定义主题来高亮代码。你可以在 highlight.js 官网 上选择一种自定义主题，或者创建一个自定义主题（https://highlightjs.org/tools/theme-builder/）。
然后，将自定义主题 CSS 文件引入到 html 文件中：
<link rel="stylesheet" href="/path/to/styles/default.css">
最后，在 gulp-highlight-code 中使用使用自定义主题：
gulp.task('highlight', function () {
return gulp.src('src/**/*.js')
.pipe(highlight({ theme: 'your-custom-theme' }))
.pipe(gulp.dest('dist'));
});4. 其他配置
你还可以在使用 gulp-highlight-code 时设置其他的配置项，例如代码的行号，是否显示行号等。代码示例：
-- -------------------- ---- -------
---------------------- -------- -- -
------ -----------------------
-----------------
--------- -------------
------ ----------
----------- -----
------------ -----
---------------- --
----------- ---
---
-------------------------
---总结
高亮代码对于前端开发者来说是一个非常有用的工具，能够提高代码的可读性和可维护性。gulp-highlight-code 是一个简单易用、功能强大的代码高亮插件，它支持多种编程语言和自定义主题，能够满足大多数前端开发者的需求。在实际的前端开发中，我相信 gulp-highlight-code 值得尝试和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056d1281e8991b448e6d21