代码? 要高亮!

米落,2008年8月19日

  Z-Blog的插件鼓捣了有些日子了,磨工完全出于自己懒惰,和编辑环境完全没关系,至少当我尝试用VS2008打开本地IIS站点时惊人的时候还能编译通过.能使用上VS的JS提示以及HTML页面控件的拖拽,即使编辑VBscript时相当于记事本毫无帮助.
  是一个给代码加亮的插件,暂定名CodeLight.属于自给自足.不会发出来主要是自己懒的面对各式各样不同种类天马行空的bug错误.

  下面给大家推荐一些选定加亮代码时的js库.

 CodePress

 

  •   实时的语法高亮
  • 支持代码片段
  • 自动完成(简单的类别诸如 " 双引号  ' 单引号 ( 括号 { 大括号)
  • 支持快捷键
  • 支持多段显示("Multiple windows" 我也不知道怎么翻译)

安装步骤:

  1. 在 CodePress 首页下载库代码,代码仅仅是一些Javascript脚本以及HTML所以你可以在本地环境中调试(不需要webserver).
  2. 插入CodePress脚本在你的代码页面<head>标记或则<body>标记中. 

 <script src="/codepress/codepress.js" type="text/javascript"></script>

  1.  添加<textarea>标记 在你需要高亮显示的地方.CodePress将不改变其高度与宽度,当页面完全载入时(代码载入完毕),CodePress会自动的替换代码段成加亮代码段.

<textarea id="myCpWindow" class="codepress javascript linenumbers-off">
   // your code here
</textarea>

  •  class中的javascript部分表示段代码将会以JavaScript格式编辑
  • class中的codepress部分表示这是一段CodePress加亮代码段
  • class中的其他选择有linenumbers-off (行数目-关),autocomplete-off (自动完成-关),readonly-on (只读,不可编辑-开)
  • 注意不要使用相同的id名称在不同的代码段(<textarea id="xx"...>)中,以及不要使用像"."(点)之类的符号作为id名称.

 

  以上是对CodePress官方的一些简单翻译,鄙人英语不好,能表达个大概,各位见谅.
  CodePress最大的特色就是支持自动完成,虽然很简陋,但加上他能直接编辑,并实时加亮,成了在线编辑代码的不二选择.并且他的API支持一些对代码段的获取,设置等,也决定了他不是甘于前台简单加亮而已(加亮简单? = =! 一般得有个三四百行吧),如果您需要后台编辑,他是您最好的选择.
  缺陷就是只支持IE脚本复制,FF没有相关函数吧,其实其他的几种都是通过与Flash交互达成,多浏览器惹得祸啊.没有代码折叠功能.

 

 SyntaxHighlighter

 

  简单,强大,易用.这就是我使用后的感受.支持多种语言,易拓展,以及Flash剪贴板实现任意浏览器复制.
  遗憾的是没有代码折叠,这对前台显示需要的,对于大量代码折叠显然能提高阅读效率.

 安装步骤

  1. 你可以使用下列两种代码格式,都是可行的.

你可以将代码放在<pre>标记内,他的好处是对RSS阅读程序的支持,有丰富的订阅用户显然可以先考虑这种格式.需要设置name属性,和class属性,其中class属性是语言别名的需要.(原: one of the language aliases you wish to use).
注意:需要将 "<" 等HTML闭合符号转换为其等意 &lt; 符.以避免代码提早闭合了代码段,这有可能造成部分代码不显示. 

<pre name="code" class="c-sharp">
... some code here ...
</pre>

 另一种代替的选择是<textarea>标记,他没有必要考虑代码闭合问题,但在RSS feed上无法工作.

<textarea name="code" class="c#" cols="60" rows="10">
... some code here ...
</textarea>

  1.  更多配置

可以在class中设置更多参数:

nogutter 不会显示装订线(?)
nocontrols 不会显示顶部设置栏
collapse Will collapse the block by default. (折叠数据块?)
firstline[value] 行数初始值
showcolumns 显示列在第一行

exp:
<pre name="code" class="html:nocontrols:firstline[10]">
... some code here ...
</pre>

  1.  使他工作

你需要在代码页面添加如下脚本:

<link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link>
<script language="javascript" src="js/shCore.js"></script>
<script language="javascript" src="js/shBrushCSharp.js"></script>
<script language="javascript" src="js/shBrushXml.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

 

JSSC ver 3

 

  国人制造!似乎这年头国货能上脸的都很稀有= =!.
  支持折叠,支持多种语言,支持未知语言高亮,安装方式多样,富有弹性.
  缺点就是类不规范,好像很难拓展的样子,自己修改自足有难度.
 

 安装步骤

  1.  首先在 <head> 区里添入样式表：<link href="style.css" rel="stylesheet" type="text/css" />，可根据需要更改名称。
     再在 <head> 区里添入js脚本文件，这有两种选择，详见下文 脚本选择。
     再将需要着色在网页上的代码放在 <pre> 或者 <textarea> 标签中（二者的优劣及注意事项见下文 标签使用），并将其 name 命名为 code ，再将其 class 属性设置为相应的代码语种名称。如：<pre name="code" class="c">。
     最后，在 <body> 区内的尾部添入js脚本：<script type="text/javascript">jssc.colorAll("code");</script>，即可。
     (注：自动装载版本需要将colorAll命令改成exec，jssc2.2之后的版本都支持语法别名和按需自动装载。如果命名为 code 有冲突，可以修改。相应的colorAll方法的参数也需修改。)
  2. 脚本选择
     

 “All-in-one”、“Individual”和“Auto-Load”三个文件夹中的脚本功能完全相同，只是用法上稍加区别。

 “All-in-one”里只需添入一个脚本文件：<script type="text/javascript" src="jssc2.js"></script>，这样便可着色所有支持的语种的代码。好处是一次性装载省时省事，浏览器缓存效果好；缺点是文件稍大（20k），且网页中仅有少数几种语言的代码需要着色时加载过多浪费。

 “Individual”里首先需要加入一个脚本文件：<script type="text/javascript" src="core.js"></script>，它必须放置在第一位，即其它js文件的前面。随后在它后面添加需要着色的代码的语种文件。如需着色c代码：<script type="text/javascript" src="c.js"></script>。好处是装载的文件小，无浪费；缺点是过于零碎。

 “Auto-Load”是综合以上两个的不足提出的新方案，它只需装载一个脚本：<script type="text/javascript" src="autoload.js"></script>。之后脚本会自动计算需求的语法文件并按需自动装载，无需理会细节。这是一个折中的方案，如果没有别的原因，一般情况下请选择这个版本。
 如果使用“Auto-Load”的话，最后的colorAll命令请改成exec命令：<script type="text/javascript">jssc.exec("code");</script>。它接收两个参数：第一个和前面一样，是节点name属性；第二个是加载语法文件的目录以及图片、flash文件的目录，如果需要加载的语法文件和页面处于同一目录的话可以省略此参数，如果在其它目录的话可以添加绝对或者相对路径。
 另外自动装载版本在本机无法掩饰，由于其使用XmlHttpRequest，必须部署在服务器上才能看到效果。

 “All-in-one”、“Individual”和“Auto-Load”三个文件夹请各取所需，按环境和个人喜好来使用。示例文件中都使用了，可以查看源代码比较。

  1. 标签使用
     <pre> 或者 <textarea> 标签二者功能完全相同，只是使用略有区别。两者共同的缺陷是由于浏览器会解析掉一些特殊字符(如：<、>、"、&)，因此在源代码中出现它们的解析字符时(如：&lt;、&gt;、&quot;、&amp;)，请先使用替换功能将 & 替换成 &amp; 。
     <pre> 的优点是在RSS feed环境中表现更好;缺点是代码中不能出现 < 符号，需要将其替换成 &lt; 。
     <textarea> 和 <pre> 正好相反，而且在firefox等浏览器下 <textarea> 可以支持超过4096字节长度的代码,<pre> 则不行。
     使用哪个标签请各按所需，示例文件中都使用了，可以查看源代码比较。

 

 

好了,翻译就到这里了.(压根就是把自己读了半天的使用方法中文表达了一下)其他的就不多介绍了,我还得写插件呢!

其他高亮选择:
google-code-prettify  小巧!50kb不到!支持多种格式,客户端实现,仅仅只有2个文件,易用.
star-light 客户端实现,较简陋.
Generic Syntax Highlighter 支持多种流行语言,格式化语言,易拓展,服务端实现.
WordPress Code Highlight Plugin WP专用插件,国人修改后出现多款修改版,CoolCode,  Code Highlight Plugin.
HighLight Z-blog插件,我是没有使用成功的,所以才有了自己弄的心思.
代码萌芽网 这种方法最直接,但是也挺烦了,每次都得自己手动贴来贴去.
 

 相关链接:
语法高亮的简单JavaScript实现
为论坛和Blog添加代码高亮显示的功能 (aspx C# 后台实现)
 基于 dp.SyntaxHighlighter 写的代码语法着色工具  (可以看看别人是如何修改整合dp.SH的)
 

Tags: 展示  资讯  JavaScript  

分类: Programer | 评论:6 | 浏览:

相关文章:

发表评论