# iceCode

**Repository Path**: bt-lang/iceCode

## Basic Information

- **Project Name**: iceCode
- **Description**: iceCode是一款简约风格的代码高亮js插件，应该是我们国内首款js高亮插件吧，纯原生JavaScript开发，体型十分娇小，无任何依赖，一个js文件，目前该插件已经内置HTML/XML/CSS/JS/PHP/Python/JAVA/SQL/GO/C++/C#/C等常用编程语言高亮，简约的唯美设计，简洁、极速！
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://www.iceui.net/iceCode.html
- **GVP Project**: No

## Statistics

- **Stars**: 34
- **Forks**: 12
- **Created**: 2020-05-06
- **Last Updated**: 2024-11-09

## Categories & Tags

**Categories**: javascript-toolkits

**Tags**: None

## README

# iceCode代码高亮js插件

#### 官方
+ iceCode 官方网站 [https://www.iceui.cn/iceCode](https://www.iceui.cn/iceCode)
+ iceCode 官方QQ群 324415936

#### 介绍
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**
+ [优化] 样式显示风格
+ [重写] 正则表达式内核
+ [增加] 自定义代码高亮语言机制

#### 使用
```html
<!-- 将代码放入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>
```
```javascript
//如此即可，就是这么简单
ice.code.light();
```

#### 设计其它语言高亮
```html
<!-- 将代码放入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>
```
```javascript
//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内置的正则库
```text
doubleQuotes:			双引号
singleQuotes:			单引号
number:					数字
bracket:				括号
operator:				运算符
url:					url链接
htmlComment:			html多行注释 <!-- …… -->
xmlComment:				xml多行注释 <![ …… [ …… ]]>
multiLineComment:		通用多行注释 /* …… */
pythonComment:			python多行注释 """ …… """
singleLineComment:		单行注释 // ……
singleLinePerlComment:	单行注释 # ……
script:					格式化html中script的js代码