1 Star 0 Fork 11

qeyser / iceCode

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

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.1

  • 2020-11-20
  • [优化] 样式的权重
  • 2020-07-15
  • [优化] 样式的权重

使用

<!-- 将代码放入pre标签中,设置class,iceCode冒号后面为编程语言 -->
<pre class="iceCode:php">
/* ---示例代码----*/
function main(){
    var a="this is a example";
    alert("hello world "+a);
}
/* ---示例代码----*/
</pre>
//如此即可,就是这么简单
ice.code.light();

设计其它语言高亮

<!-- 将代码放入pre标签中,设置class,iceCode冒号后面为编程语言 -->
<pre class="iceCode:demo2">
/* ---示例代码----*/
function main(){
	var a = 1024;
    var b = "this is a example";
	console.log(a);
    alert("hello world " + b);
}
/* ---示例代码----*/
</pre>
//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代码

空文件

简介

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

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/qeyser/iceCode.git
git@gitee.com:qeyser/iceCode.git
qeyser
iceCode
iceCode
master

搜索帮助