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