npm 包 brush-css 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们常常需要在页面中展示代码块，为了让代码更加美观、可读性更强，使用代码高亮是必不可少的。而 brush-css 就是一款轻量级的代码高亮解决方案，本文将详细介绍如何使用它。

安装

首先需要在你的项目中安装 brush-css，可以使用 npm 或 yarn 安装：

npm install brush-css --save
# 或
yarn add brush-css

引入

在你的项目中，你需要引入 brush-css 的 CSS 文件和对应的语言文件，如：

<link rel="stylesheet" href="node_modules/brush-css/styles/shCore.css">
<link rel="stylesheet" href="node_modules/brush-css/styles/shThemeRDark.css">
<script src="node_modules/brush-css/scripts/shCore.js"></script>
<script src="node_modules/brush-css/scripts/shAutoloader.js"></script>
<!-- 引入自己需要的语言文件 -->
<script src="node_modules/brush-css/scripts/shBrushCss.js"></script>
<!-- 可以引入多个语言文件 -->
<script src="node_modules/brush-css/scripts/shBrushJavaScript.js"></script>

需要注意的是，引入 brush-css 时，需要指定一种主题和一个核心样式表。shThemeRDark.css 是主题文件的一种，可自行选择其他主题样式。同时，还需要引入 shAutoloader.js 文件，用于解决自动加载语言文件的问题。

使用

在 HTML 中，使用 pre 标签和 code 标签包裹代码，然后添加 class：

<pre class="brush: css;">
  <code>
    /* 你的 CSS 代码 */
  </code>
</pre>

其中 brush 属性用于指定代码的语言，这里是 CSS，还可以使用其它语言标识，比如：

brush: js;: JavaScript
brush: php;: PHP
brush: cpp;: C++ 等

需要注意的是，用于指定语言的 class 和 brush 属性的取值必须保持一致，否则代码高亮无法正常显示。

最后，需要在 JS 中调用 SyntaxHighlighter.all()，对代码进行高亮渲染：

SyntaxHighlighter.all();

示例代码

完整的示例代码如下：

-- -------------------- ---- -------
--------- -----
------
  ------
    ----- ----------------
    ---------------- ------------
    ---- -- --------- ---- ---
    ----- ---------------- ------------------------------------------------
    ----- ---------------- ------------------------------------------------------
    ------- --------------------------------------------------------
    ------- --------------------------------------------------------------
    ------- ------------------------------------------------------------
  -------
  ------
    ---- --- ---
    ---- ------------- ------
      ------
        ---- -
          ---------- -----
        -
        ---- -
          ------- --
          -------- --
          ------------ ------ ---- ------- ------- -------- -----------
          ------------ ----
        -
        --- --- --- --- --- -- -
          ----------- --
        -
      -------
    ------
    ---- ---- ------------ ---
    --------
      ------------------------
    ---------
  -------
-------

总结

brush-css 可以方便地实现代码高亮，使用也很简单。未来，可以将它应用到个人博客中，营造更加舒适的阅读体验。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066c8accdc64669dde524d