一个轻量级 Javascript代码高亮插件 Rainbow

一个轻量级 Javascript代码高亮插件 Rainbow

一个轻量级 Javascript代码高亮插件 Rainbow

本站之前介绍过一个代码高亮的 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。

本站提供 WordPress 主题定制开发服务

本站长期承接 WordPress 主题、插件、基于 WooCommerce 的商店商城开发业务。 我们有 8 年 WordPress 开发经验,如果你想 用 WordPress 开发网站, 请联系 QQ: 470266798,或邮箱: 4626395@gmail.com 咨询。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*