在前端开发中，我们经常需要将代码以漂亮的形式展示出来，这样可以帮助读者更好的理解我们的内容。brush-plain 是一个优秀的第三方 npm 包，它能够将代码高亮并且加入行号，提升代码阅读体验。本文将详细介绍 brush-plain 的安装、配置和使用方法。
安装 brush-plain
在安装 brush-plain 之前必须确保已经有 Node.js 环境，npm 是 Node.js 的包管理器，如果没有先安装 Node.js，可以通过访问 https://nodejs.org/ 下载。 安装完成后，在命令行中输入以下命令即可安装 brush-plain：
npm install brush-plain
使用 brush-plain
在 HTML 中使用 brush-plain
在要加入高亮代码的 HTML 文件中引入 brush-plain.css 和 brush-plain.js：
<link rel="stylesheet" href="./brush-plain/brush-plain.css"> <script src="./brush-plain/brush-plain.js"></script>
然后将需要高亮的代码放在 code 标签内，brush-plain 会对 code 标签内的所有文字进行处理：
<pre><code>function sayHello(){
console.log("Hello World!");
}
</code></pre>效果如下：
在 React 中使用 brush-plain
在 React 中使用 brush-plain 可以直接安装 react-brush-plain，该库封装了 brush-plain 并提供了已经做好的组件。
- 安装
react-brush-plain
npm install react-brush-plain
- 引入
react-brush-plain
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- ----- - ---- --------------------
----- --- - -- -- -
--
---------- --------------------- ----- ------ ---
------ --------------------- -------- ------ ---------- ---------------- --------- -- ----- ---- ---
---
--- 参数说明
language：代码语言，支持：html/xml、c/cpp、css、java、javascript、json、objective-c、php、python、ruby。style：样式，可选参数。如果不传递，则使用默认样式。
以上便是在 React 中使用 brush-plain 的方法。
多样式自定义
在默认的 brush-plain.css 中，我们可以看到以下 CSS 选择器进行了定义：
-- -------------------- ---- ------- -- ------- -- ------------ ---------- - ----------------- ------- - -- ---- -- ------------ ------- - ------ ------- -
这些 CSS 样式是可以被我们覆盖的，比如说我们想要修改高亮代码背景颜色，只需要如下所示覆盖即可：
.highlight {
background-color: #fff;
}一个常见的需求是行号颜色与代码颜色不同，可如下代码修改 .number 的样式：
.number {
color: #ccc;
}这样就可以定制自己喜欢的样式了。
总结：
以上便是 brush-plain 的使用教程，希望对大家有所帮助。brush-plain 可以方便地帮我们将代码高亮并且加上行号，这大大提升了阅读代码的效率。在使用时需要注意的是，要将 brush-plain.css 和 brush-plain.js 引入到 HTML 文档中，并且注意样式的覆盖。如果在 React 中使用，直接安装 react-brush-plain 并引入即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8accdc64669dde5262