2 Star 15 Fork 5

冰优 / iceCode

Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

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代码

Comments ( 1 )

Sign in for post a comment

About

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

Releases (1)

All

iceCode

Contributors

All

Activities

load more
can not load any more
JavaScript
1
https://gitee.com/iceui/iceCode.git
git@gitee.com:iceui/iceCode.git
iceui
iceCode
iceCode
master

Search