在前端开发中，代码高亮是一个非常重要的功能，可以让代码更易读、易懂。而 highlight.js 正是为此而生的一款 JavaScript 库。它支持超过 180 种编程语言的高亮显示，并且提供了多种样式可供选择。本文将为大家详细介绍如何使用 highlight.js。
安装
首先，在你的项目中安装 highlight.js：
npm install highlight.js
使用
在需要高亮显示代码块的页面中引入 highlight.js 的 CSS 和 JavaScript 文件：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------------------------------------------------- ------- ------ ------- ----------------------------------------------------------- ------- -------
接着，在代码块的父元素上添加 hljs 类名：
<pre><code class="hljs javascript">
function sayHello() {
console.log('Hello, world!');
}
</code></pre>这样就可以将其中的 JavaScript 代码高亮显示了。如果你想将其他编程语言的代码高亮显示，只需要将类名中的 javascript 替换成对应的语言缩写即可。例如，要高亮显示 Python 代码，可以将类名改为 python。
自定义样式
highlight.js 提供了很多内置的样式供选择，但如果你想自定义样式，也很容易。首先，可以使用 highlight.js 的命令行工具导出内置的样式表：
hljs -t css -a styles/default > my-style.css
这会将 styles/default.css 中的样式输出到 my-style.css 文件中，你可以在此基础上进行修改。
然后，在页面中引入自定义的样式表：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------------------------------------------------ ------- ------ ------- ----------------------------------------------------------- ------- -------
高级用法
除了基本用法外，highlight.js 还提供了一些高级功能。例如，可以通过配置选项来更改默认设置：
hljs.configure({
// 是否自动检测代码块中的语言
autoDetect: true,
// 是否启用行号
lineNumbers: true,
// 是否启用代码折叠
collapsible: true,
});还可以使用插件扩展 highlight.js 的功能。例如，highlightjs-line-numbers.js 可以为代码块添加行号：
npm install highlightjs-line-numbers.js
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- -----------------------------------------------------
----- ---------------- ----------------------------------------------------------------
-------
------
---------- ----------- ----------- ------------------
-------- ---------- -
------------------- ---------
-
-------------
------- -----------------------------------------------------------
------- -----------------------------------------------------------------------------------------
--------
------------------------------
-----------------------------
---------
-------
-------总结
使用 highlight.js 可以轻松实现代码高亮，使代码更易读、易懂。我们介绍了 highlight.js 的基本用法、自定义样式和高级功能，并提供了示例代码供大家参考。希望这篇文章能对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32449
