Rainbow实现代码高亮使用教程

最新推荐文章于 2024-05-09 09:54:09 发布

importtao

最新推荐文章于 2024-05-09 09:54:09 发布

阅读量1.9k

点赞数 2

分类专栏：前端文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_24922947/article/details/57086403

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

importtao

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Rainbow实现代码高亮使用教程

Rainbow实现代码高亮使用教程Rainbow 是JavaScript开发的语法高亮工具。被设计为轻量级（压缩后仅1.4 kb），使用简单，可扩展。语法高亮主题完全通过CSS定义。基于正则表达式实现。官网支持语言:C、C#、Coffee、script、CSS、D、Generic、patterns、Go、Haskell、HTML、Java、JavaScript、JSON、Lua、PH
复制链接

扫一扫