在前端开发中，我们常常需要在页面中展示代码块，为了让代码更加美观、可读性更强，使用代码高亮是必不可少的。而 brush-css 就是一款轻量级的代码高亮解决方案，本文将详细介绍如何使用它。
安装
首先需要在你的项目中安装 brush-css，可以使用 npm 或 yarn 安装：
--- ------- --------- ------ - - ---- --- ---------
引入
在你的项目中，你需要引入 brush-css 的 CSS 文件和对应的语言文件，如：
----- ---------------- ------------------------------------------------ ----- ---------------- ------------------------------------------------------ ------- -------------------------------------------------------- ------- -------------------------------------------------------------- ---- ----------- --- ------- ------------------------------------------------------------ ---- ---------- --- ------- -------------------------------------------------------------------
需要注意的是，引入 brush-css 时，需要指定一种主题和一个核心样式表。shThemeRDark.css 是主题文件的一种，可自行选择其他主题样式。同时，还需要引入 shAutoloader.js 文件，用于解决自动加载语言文件的问题。
使用
在 HTML 中，使用 pre 标签和 code 标签包裹代码，然后添加 class：
---- ------------- ------
------
-- -- --- -- --
-------
------其中 brush 属性用于指定代码的语言，这里是 CSS，还可以使用其它语言标识，比如：
brush: js;: JavaScriptbrush: php;: PHPbrush: cpp;: C++ 等
需要注意的是，用于指定语言的 class 和 brush 属性的取值必须保持一致，否则代码高亮无法正常显示。
最后，需要在 JS 中调用 SyntaxHighlighter.all()，对代码进行高亮渲染：
------------------------
示例代码
完整的示例代码如下：
--------- -----
------
------
----- ----------------
---------------- ------------
---- -- --------- ---- ---
----- ---------------- ------------------------------------------------
----- ---------------- ------------------------------------------------------
------- --------------------------------------------------------
------- --------------------------------------------------------------
------- ------------------------------------------------------------
-------
------
---- --- ---
---- ------------- ------
------
---- -
---------- -----
-
---- -
------- --
-------- --
------------ ------ ---- ------- ------- -------- -----------
------------ ----
-
--- --- --- --- --- -- -
----------- --
-
-------
------
---- ---- ------------ ---
--------
------------------------
---------
-------
-------总结
brush-css 可以方便地实现代码高亮，使用也很简单。未来，可以将它应用到个人博客中，营造更加舒适的阅读体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c8accdc64669dde524d