【翻译】JavaScript Syntax Highlighting Engine | 黄锦诚的个人博客

黄锦诚的个人博客--有志者是锦诚!

【翻译】JavaScript Syntax Highlighting Engine

JavaScript Syntax Highlighting Engine–脚本语法高亮引擎
  最近在搞一个页面代码演示的DEMO,需要用到一些语法着色的脚本工具,所以才会有了本文。
语法着色,相信很多写博客的同行或是CODER都会用到,各种各样形形式式的语法着色工具也试了不少,这些工具都有着不同的粉丝,本来工具这个就没有所谓的谁好谁坏的,只是每个人的出发点、需求和使用的习惯不同,所以也就有了不同的选择。
本文翻译的是我最近做代码演示使用到的一个JS的语法着色工具—JavaScript Syntax Highlighting Engine,我选择了该工具的原因是,体积小,只有一个脚本文件和一个样式文件,但该工具也有一个缺点,就是只支持  JavaScript、CSS、XML、HTML四种语言,但对于一个搞前端开发的来说,这四种语言已经足够了。

  从项目的时间标注看,该项目是在2007/06/06 11:28建立的,但最后更新是在2008/09/03 19:04,到现在2011已经也有好几年没作更新了,虽然已经很好的,但是如果允许的话,还是希望看到再次更新。

  选择这个着色的原因也很简单,文件很小,也就14K的脚本加上2K的样式,且还可以自定义样式,已经很不错了。其他的着色文件虽然强大,但是也臃肿和麻烦,故最后通过比较还是选择了这个。

  下面是译文正文:

脚本语法高亮引擎

  你曾经想在你的文章里进行语法着色尝试过多少次?我过去就手工尝试过在我我选择使用的一个Emacs文本编辑器上添加这个语法高亮。但效果很烂,因为它使得我的源码基本不能再次进行编辑。后来,我在UNIX的环境里开发了一些服务器端的语言用来进行语法着色,这是一种基于非常优秀的颜色的库的语言。在这个站点里可以用来高亮绝大部分的语言的演示页面。

  最后,这个最理想的状态就是让浏览器执行。这个项目是一个能够广泛应用的基于Javascript的脚本语法高亮引擎。我建立了至少两个其他的项目来做同样的一件事,但是很多的原因 我导致我却无法使用。我以后再和你说这件事的。

  我决定把这个主要的项目叫做DlHighlight,目前暂时支持以下语言的高亮:

  • JavaScript
  • CSS
  • XML
  • HTML

  以后我可以后增加支持更多的语言,如果你们有投稿或参与开发的兴趣——仅仅是因为你们与我有着本文共同的观点,那么请你可以发Email给我,让我可以直接的联系到你,那样我就可以帮你将你你的技术文档和附件在我这里进行发表了。

下载和使用方法:

  点击下载完整版本

  源码全部压缩在hl-all.jsstyle.css这两个文件中了。你的文档中需要引用这两个文件并且声明以下函数就可以使用了。

DlHighlight.HELPERS.highlightByName("code", "pre")

  以上代码插入在中在浏览器载入完毕时执行。然后所在<pre></pre>标签中写入你要高亮的代码,然后增加属性 name=”code” 和 class=”语言种类” (语言种类可以是“js”、“css”、“xm”或“html”)。

  更多详细的信息在zip的压缩包内,里面包含了没压缩和压缩后的源码。

许可

这是一个开源的软件但发布是遵循This is free software released under the terms of the GNU通用公共许可证(GNU General Public License)的。

JavaScript脚本演示

全面的支持JS。
  可以高亮“关键字高亮”和“内置高亮”两种类型。“内置高亮”其实就是一些我们常见的出现个JS注释里的东西,例如全局的对象类型(window),或者是alert()这些功能函数。同样支持正则表达式的高亮,函数名称和HASH字段的高亮。以上所有的都基本完全的支持了,因为该脚本对关联的语言分析有着一个良好的垫板思维。

  字符串、注释、正则(通常,每样事物都会有以某些东西开始和结束)都能找到开始和结束的标记着色的不同而区分开来,并且这人上高亮的效果也非常容易进行定制自己的效果,你只需要修改样式表中的 .before 和 .after 这两个类,你同样可以开发出对超文本的URL地址高亮效果。

语法着色的效果如下:


  同样的支持CSS语法着色。我们只高亮特别的语法如声明或伪类的名称等等。下面的演示中提示错误文字的注释的(行高是11px)但我们也把他作为一个关键字来进行区分开来,仅仅是一个说明,当然,可以这样说但我还不知道用什么原因来解释我为什么这样来进行定义语法高亮。

已知的问题
  支持显示的行号的问题会在大部分的浏览器显示的时候会截断。他只在火狐里表现良好。这是因为它没有正确的的输出一个<ul>标签,很多项目里也会有这个情况出现,或者以后会考虑修改这个问题。

一些其他相类似的项目
  我在网站上查找到了一些和我的这个相类似的项目。他们是

http://code.google.com/p/syntaxhighlighter/

  这一个从外到内都会产行很多函数,例如“打印”和“编辑/复制”等,我也会增加这些功能到我的项目里面,但现在是还没有时间去做,这不松不紧的原因是因为缓慢的进度远远赶不上发展。

http://www.webessence.nl/projects/highlight/

  谷歌的发展是非常的快,但是,对JS的支付还是达不到我地期望(它不能高亮正则,也不支持before/after这些标记,不支持高亮hash的关键字或者函数名称等)。我也不认为会能以扩展到支持所有的语言(或者我的想法是错误的)。

  此外,我也找不到他们的项目是遵循哪一个协议的(译者注:也许这就是开源)。

  全文完!

  原文地址如下:http://mihai.bazon.net/projects/javascript-syntax-highlighting-engine

  初次一字一句的来进行翻译,虽然看原文大概的意思能看懂,但估计有很多地方译得有问题,且英语很多都已经还给老师了,文中不对之处或欠妥之处,欢迎指正。
  再次感谢你的阅读。





发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

黄锦诚 腾讯微博
黄锦诚,专注前端、分享生活、记录工作、关于一切,这里有不一样的惊喜!

分类

Wopus主机优惠码

无觅相关文章插件,快速提升流量