本站之前介绍过一个代码高亮的 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>
需要注意的是,rainbow 的 css 主题只高亮 pre 包含的代码,如果需要高亮 code 标签包含的代码,请单独为 code 标签写 CSS。