Rainbow实现代码高亮使用教程

来源：互联网发布：手机网络连接超时编辑：程序博客网时间：2024/06/07 08:43

Rainbow实现代码高亮使用教程

Rainbow 是JavaScript开发的语法高亮工具。被设计为轻量级（压缩后仅1.4 kb），使用简单，可扩展。语法高亮主题完全通过CSS定义。基于正则表达式实现。
官网
支持语言:C、C#、Coffee、script、CSS、D、Generic、patterns、Go、Haskell、HTML、Java、JavaScript、JSON、Lua、PHP、Python、R、Ruby、Scheme、Shell、Smalltalk、SQL。
使用教程：
1.将你要展示的代码放到 pre code标签里，data-language些相关语言。

<pre><code data-language="java">        public class Test{            public static void main(String args[]){                String a;                System.out.println(a);            }        }        </code></pre>

2.head标签里链接css文件

<link href="kimbie-light.css" rel="stylesheet" type="text/css">

支持多种风格，可到github下载相关css文件：css
3.到官网下载对应语言js文件也可以直接下载多语言集成的，然后body标签里引入即可。

 <script src="rainbow-custom.min.js"></script>

相关css和js文件也可到百度云下载，链接：http://pan.baidu.com/s/1skQQT3n 密码：my4n
最后附上一个完整demo：

<html>    <head>        <tittle>Rainbow使用示例</tittle>        <link href="kimbie-light.css" rel="stylesheet" type="text/css">    </head>    <body>        <pre><code data-language="java">        <% response.getAttribute();%>        <%= response.getAttribute();%>        public class Test{            public static void main(String args[]){                int a;                System.out.println(a);            }        }        </code></pre>    <script src="rainbow-custom.min.js"></script>    </body></html>

1 0