用 ezj 一句代码实现代码高亮

作者：vkvi 来源：ITPOW（原创） 日期：2010-5-26

返回 ezj。

ezj.ext.highlighter.light 实现代码高亮功能。

语法

ezj.ext.highlighter.light(codeContainer)

参数

  • codeContainer string/object。若 codeContainer 是字符串，那么它表示 class 名称，凡是具有该 class 的元素中的内容均被当作代码来高亮；若 codeContainer 是对象，那么它表示一个 HTML 元素对象，其内部的内容被当作代码来高亮。

返回值

无

说明

ezj 本身不提供代码高亮脚本，ezj 在此处集成是 SyCODE Syntax Highlighter，增强了代码功能，方便了使用。ezj 将自动加载 Highlighter.js，当然您也可以手动加载 ext/Highlighter/Highlighter.js。

 * SyCODE Syntax Highlighter 1.0 内部已经实现二十于种语系的语法高亮，包括：
 * 1. C/C++
 * 2. C#
 * 3. CSS
 * 4. Delphi/Kylix
 * 5. Pascal
 * 6. Java
 * 7. Vb/Vb.net
 * 8. J(ava)Script
 * 9. ActionScript
 * 10. Php
 * 11. Python
 * 12. Ruby/Rails
 * 13. Perl
 * 14. Assembly
 * 15. Bat 批处理
 * 16. UNIX Shell
 * 18. AWK
 * 19. Sql
 * 20. xml/xhtml

大多数人使用 pre 来存放代码，但我们建议使用 div，虽然在显示上二者无区别，但某些浏览器中，从 div 复制的代码更具有可读性。

示例

示例一

<div id="div1" class="css">
body{font-size:13px;}
</div>
<script type="text/javascript" src="ezj.js"></script>
<script type="text/javascript">
<!--
ezj.ext.highlighter.light(ezj.element.get("div1"));
//-->
</script>

高亮 id 为 div1 中的内容，其代码语言为 class 指定的 css。

示例二

<div class="code css">
body{font-size:13px;}
</div>
<div class="code csharp">
string str = "cftea";
</div>
<script type="text/javascript" src="ezj.js"></script>
<script type="text/javascript">
<!--
ezj.ext.highlighter.light("code");
//-->
</script>

两个 div 的 class 均含有 code，light 方法的参数是 code，也就是说这两个 div 都会被代码高亮。其使用的语言由 class 中最后一项指明：第一个 div 为 css；第二个 div 为 csharp。

SyCODE Syntax Highlighter 支持的语言标识

一般就是语言名称或其缩写，比如要标明 JavaScript 代码，可使用：js、jscript、javascript。更多内容可打开 ext/Highlighter/Highlighter.js 查看 Aliases 这些项。

相关文章