Functional Demos

代码高亮控件的使用

日志操作


一、基本说明:

之前一直在使用 CodeHighlight 控件来完成代码高亮,现在我发现了另一个更加好的控件,使用的是jQuery的一个插件,之所以说其好,主要有以下几个原因:

  • 使用的是JS完成代码高亮,节省服务器资源,效率比较高
  • 可以非常灵活地自定义高亮的关键字和规则,同时也可以增加自定义高亮语法
  • 可完全自定义高亮代码的风格,因为所有样式直接通过CSS完成
  • 不需要任何配置,即可马上使用
  • 在复制代码时,只需选择要复制的代码段,然后即会弹出复制框,这时只需点击一下里面的内容,即可自动复制到剪贴板了
  • 复制代码时,不会将行号也一并复制
不过使用此控件,感觉唯一不太理想的一点就是不支持代码折叠,不过其实这一功能用得不多,比起之前的服务器端的 CodeHighlight 控件,这点缺点还是可以接受的,呵

二、相关的JS文件:
此控件用到的JS文件包括以下2个,均是放在本项目的目录下:
  • Js/Plugins/Chili/jquery.chili.js  主文件,完成高亮的核心功能
  • Js/Plugins/Chili/recipes.js  自定义高亮语法文件,可在这里修改你自己的语法规则
此插件使用了 <per> 和 <code> 元素,所以也可以定义这2个元素的CSS,本项目里是在 Css/base.css 里对其进行了定义。
三、使用说明:
此控件使用非常简单,只需将要高亮的代码放到<per> 和 <code> 元素块里,然后为 <code> 设置好相应的 css 样式即可,代码如下:

<pre><code class="csharp">
Test test = new Test();
</code></pre>
这里要注意的是,在代码块里的代码,如果包含了 “<” 或者 “>”号等HTML标记,必须要使用转换符代替

如要为代码块里添加显示行数功能,只需在页面添加以下JS代码即可:

ChiliBook.lineNumbers = true;//高亮代码显示行数
第二种方法是直接为某个要显示行数的代码块设置,只需在 code 添加 lineNumbers="true" 参数即可,此参数优先级高于上面的JS代码指定,代码如下:

<pre><code class="csharp" lineNumbers="true" >
Test test = new Test();
</code></pre>
目前本控件支持的高亮语法有以下几种:

语言对应的class名称
C#csharp
HTML/ASP.NEThtml
JavaScriptjs
CSScss
MSSQLsql
C++cpp
Javajava
XMLxml
MSSQL/MYSQLsql

如要添加更多的语法支持,直接修改 Js/Plugins/Chili/recipes.js 即可,至于添加的方法,主要是以正则匹配,大家可到此控件的官方网站上去看看:http://noteslog.com/chili/