本站之前介绍过一个代码高亮的 JS 库：[本站所用的代码高亮js代码库：Prism js](https://www.wpzhiku.com/the-code-highlight-script-used-buy-twpzhiku-site/)，今天在这里介绍另外一个功能类似的 Rainbow，Rainbow 是一个小巧的代码语法高亮js库，压缩之后只有 1.4kb，代码高亮的样式可以通过 CSS 定义。

怎么使用 Rainbow

Rainbow 的实现非常简单，首先遍历代码块，通过正则表达式匹配代码，然后用 span 标签标记需要高亮的代码，然后根据 CSS 定义的代码颜色和样式，显示代码。下面是一个简单的例子。

首先，用 data-language，说明需要高亮的代码类型，下面的例子中是 python 代码。

<pre><code data-language="python">def openFile(path):
file = open(path, "r")
content = file.read()
file.close()
return content</code></pre>

然后，引入 CSS 样式

<link href="/assets/css/theme.css" rel="stylesheet" type="text/css">

然后引入 rainbow.js，和需要高亮的语言的规则 js，建议把这几个文件合并到一个文件中，以减少 HTTP 请求。

<!-- you can create a custom build with specific languages
this should go before the closing </body> -->
<script src="/assets/js/rainbow.min.js"></script>
<script src="/assets/js/language/generic.js"></script>
<script src="/assets/js/language/python.js"></script><script src="/assets/js/language/python.js"></script>

需要注意的是，rainbow 的 css 主题只高亮 pre 包含的代码，如果需要高亮 code 标签包含的代码，请单独为 code 标签写 CSS。