前言
在前端开发中，我们经常需要用到代码高亮显示功能来增强用户阅读体验。此时，npm 包 brush.js 可以帮我们快速实现此功能。
安装
我们可以使用 npm 在项目中安装 brush.js：
npm install brush
基本使用
-- -------------------- ---- ------- ------ ----- ---- -------- ----- ---- - --------- ---------- - ------------------- --------- --- ----- -------- - ------------- ----- --------------- - --------------------- ---------- -----------------------------
在上面的代码中，我们首先导入 Brush，然后定义一个字符串 code，其中包含代码，接着定义一个字符串 language，表示代码语言类型（比如，javascript、html、css 等），最后调用 Brush.highlight() 方法将高亮渲染后的代码保存到变量 highlightedCode 中，并输出。
自定义样式
如果你想要自定义高亮样式，可以使用 Brush.addStyles() 方法。
-- -------------------- ---- -------
------ ----- ---- --------
-----------------
---------- --------- -
------ ---------
-
---
----- ---- - ------ ----- - ------
----- -------- - -------------
----- --------------- - --------------------- ----------
-----------------------------在上面的代码中，我们调用 Brush.addStyles() 方法添加了一条自定义样式，将数字的颜色设置为红色。
支持的语言
brush.js 支持的语言非常丰富，包括但不限于以下类型：
- Clojure
- CoffeeScript
- CSS
- Diff
- Go
- HTML
- Java
- JavaScript
- JSON
- Less
- PHP
- Python
- Ruby
- Sass
- Scala
示例代码
下面是一个完整的使用 brush.js 的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
-----------------
------------ -
------ ------
--
---------- ---------- -
------ ------
--
---------- --------- -
------ ------
--
---------- --------- -
------ ------
-
---
----- ---- - ------ ----- -
-------------- -- -
------ - --
------ - --
-
---------- -
------ --- - ------ - -- - - ------ - ----
-
---
----- -------- - -------------
----- --------------- - --------------------- ----------
-----------------------------结语
使用 brush.js 可以帮我们快速地实现代码高亮显示功能，并支持自定义样式。如果需要用到代码高亮显示功能，请一定尝试使用 brush.js。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8bccdc64669dde528f