2 Star 34 Fork 11

冰优/iceCode

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

iceCode代码高亮js插件

官方

介绍

iceCode是一款简约风格的代码高亮js插件,应该算是我们国内首款js高亮插件吧,纯原生JavaScript开发,体型十分娇小,无任何依赖,只需一个js文件,目前该插件已经内置HTML XML CSS JS PHP Python JAVA SQL GO C++ C# C等常用编程语言高亮,简约的唯美设计,简洁、极速!

大家都知道SyntaxHighlighter、Google Code Prettify、Highlight等等JavaScript代码高亮插件,你或许发现最出名的这几款都是国外大牛的作品,有中国的么?至少我所知道最常用的代码高亮插件没有一款是中国的,我在将iceEditor富文本编辑器写完以后,开始研究代码高亮的原理,大约在两年前用了一个月的时间搞定了,第一版的性能很优越,但是在插件机制上不是很完美,至此就告一段落,后来到两年后的现在开始用的时候,用了一下午的时间重写了内核,以数组将代码分段形式处理,解决了SyntaxHighlighter的单行无法注释的bug。

例如一段php代码:echo "hello wrold//这是备注"; //这是备注

SyntaxHighlighter处理后会发现,备注无法生效,是因为正则后的备注为//这是备注"; //这是备注,双引号的内容处理完毕以后,后面的代码无法高亮,而iceCode完美的解决了这种正则问题,但是,这还无法达到我的完美要求,我开始着手分析各大代码高亮js,分析实现的原理,最终我又重写了iceCode的内核,也就是第三版,此时的内核性能更加高效,比SyntaxHighlighter号称最优秀的JavaScript代码高亮插件性能高三倍以上,并且已经内置常用的十几种编程语言,无需格外引用,非常简洁、轻量。

如今,iceCode已设计完毕,在gitee(不会选择github的原因是因为中国的gitee做的非常棒,默默的提gitee加油!)开源,我想说的是,我们中国的代码高亮插件也会越做越好,至少,目前的大量测试,在代码高亮上不会差于SyntaxHighlighter,尤其是自定义高亮语言时。

优点

  • 纯原生开发,无任何依赖,冰清玉洁
  • 响应式布局,适应任何分辨率的设备
  • 整个代码不到30k
  • 简约的唯美设计,简洁、极速
  • 速度是syntaxhighlighter的3倍
  • 解决了很多代码高亮的插件的短板问题

最新更新

iceCode v1.0.2

  • 2021-06-01
  • [增加] 代码格式化
  • [增加] data-id:可展示该id下的html代码
  • [增加] data-width:可设置宽度
  • [增加] data-height:可设置高度
  • [修复] 复制的代码有换行问题
  • [优化] 侧栏行号,随着行号自适应宽度
  • [优化] 横向和竖向滚动条,自适应手机端

iceCode v1.0.1

  • 2020-11-20
  • [优化] 样式的权重
  • 2020-07-15
  • [优化] 样式的权重
  • 2020-05-06
  • [优化] 样式显示风格
  • [重写] 正则表达式内核
  • [增加] 自定义代码高亮语言机制

使用

<!-- 将代码放入template标签中,设置class,iceCode冒号后面为编程语言 -->
<template class="iceCode:php">
/* ---示例代码----*/
function main(){
    var a="this is a example";
    alert("hello world "+a);
}
/* ---示例代码----*/
</template>


<!-- 如果你要展示html的示例并且展示相关代码的话,那更简单了。 -->
<div id="demo1">
	<div class="title">孤独的鱼</div>
	<div class="content">
		<div class="text">从来没有想过,原来我是那么的孤独……</div>
		<div class="time">2014-06-12</div>
	</div>
</div>
<!-- data-id的值为上面的id,这样会将demo1中的所有html内容高亮,
并且不会影响demo1的样式布局 -->
<template data-id="demo1"></template>
//如此即可,就是这么简单
ice.code.light();

设计其它语言高亮

<!-- 将代码放入template标签中,设置class,iceCode冒号后面为编程语言 -->
<template class="iceCode:demo2">
/* ---示例代码----*/
function main(){
	var a = 1024;
    var b = "this is a example";
	console.log(a);
    alert("hello world " + b);
}
/* ---示例代码----*/
</template>
//ice.code.languages是代码语言高亮规则,可随意设置其它语言,多种别名以空格隔开
//ice.code.regexLib是内置的正则库,具体请看后面的文档
//regex接受参数为正则或者funceion(code),code为代码内容,css为内容上的class样式
ice.code.languages['demo1 demo2 demo3'] = [
	{regex:ice.code.regexLib.doubleQuotes,	css:'string'},
	{regex:ice.code.regexLib.operator,		css:'operator'},
	{regex:function(code){
		//获取数字
		return data.replace(/\b([\d]+)\b/g, function(a) {
			return ice.code.setCss('number',a);
		});
	}},
];
ice.code.light();

ice.code.regexLib内置的正则库

doubleQuotes:			双引号
singleQuotes:			单引号
number:					数字
bracket:				括号
operator:				运算符
url:					url链接
htmlComment:			html多行注释 <!-- …… -->
xmlComment:				xml多行注释 <![ …… [ …… ]]>
multiLineComment:		通用多行注释 /* …… */
pythonComment:			python多行注释 """ …… """
singleLineComment:		单行注释 // ……
singleLinePerlComment:	单行注释 # ……
script:					格式化html中script的js代码
MIT License Copyright (c) 2015 https://www.iceui.cn Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. http://www.opensource.org/licenses/mit-license.php

简介

iceCode是一款简约风格的代码高亮js插件,应该是我们国内首款js高亮插件吧,纯原生JavaScript开发,体型十分娇小,无任何依赖,一个js文件,目前该插件已经内置HTML/XML/CSS/JS/PHP/Python/JAVA/SQL/GO/C++/C#/C等常用编程语言高亮,简约的唯美设计,简洁、极速! 展开 收起
JavaScript 等 3 种语言
MIT
取消

发行版 (1)

全部

贡献者

全部

近期动态

加载更多
不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/iceui/iceCode.git
git@gitee.com:iceui/iceCode.git
iceui
iceCode
iceCode
master

搜索帮助

Cb406eda 1850385 E526c682 1850385