html 代码块显示 插件,代码区高亮显示插件-SNIPPET

插件描述：Snippet 是一款Jquery高亮插件，他提供了一个快速和简便的在html中高亮显示源代码的方式。

Snippet 是一款Jquery高亮插件，他提供了一个快速和简便的在html中高亮显示源代码的方式。

高亮语言支持

原始支持15种流行语言

C、C++、C#、CSS、Flex、HTML、Java、JavaScript、JavaScript with DOM、Perl、PHP、Python、Ruby、SQL、XML

可通过扩展支持的语言

Bison、ChangeLog、Desktop Files、Diff、GLSL、Haxe、Java prop files、LaTex、LDAP files、Log files、LSM files、M4、Makefile、Objective Caml、Oracle SQL、Pascal、Prolog、RPM spec files、S-Lang、Scala、Shell、Standard ML、Tcl、Xorg config files

使用步骤

1.) 将Jquery和Snippet 的JS库引用到页面中

2.) 将 Snippet 的CSS文件引用到页面中

3.) 在script标签内部的任意pre元素上调用Snippet

格式为： $(“元素的选择器”).snippet(“标签语言”,{“参数1″:”参数值”,”参数2″:”参数值”……});$(document).ready(function(){

$("pre.htmlCode").snippet("html");

});

4、考虑到css样式文件的大小，如果只想用其中一种显示效果就只需要将指定样式的css放在页面中

如果嫌麻烦的话可以将整个jquery.snippet.css 引用到自己的页面中

参数解析

详细参数

box:”5″

表示第几行被边框选中

也可以写成 box:”2-6″ 则表示将2-6行的代码标记，多个段用,隔开。如 box:”5,2-6″，你将看到如下的效果：

boxColor: “red”

选中某行边框的边框颜色

boxFill: “black”

选中某行边框的背景颜色

clipboard: “ZeroClipboard.swf”

这个值基本上是定死的，至今还未搞懂clipboard继承的用法，因为我在用的时候可以显示”copy”字样，但是点击没反应，研究中….

transparent:false

是否让代码区的背景显示为透明，即没有后面的背景和边框，一般默认为不透明

menu:true

是否在右上角显示工具条

alt=""/>

collapse:false

是否有 显示/隐藏 的工具条，默认为false，可以开启

hideMsg:”Collapse Code”

当collapse为true时，隐藏代码区的按钮文字，建议换成中文

alt=""/>

showMsg:”Collapse Code”

当collapse为true时，展开代码区的按钮文字，建议换成中文

style:”random”

高亮显示的样式，默认为随机样式。一共有39种样式可供选择，详细的效果可以到官网查看，也可以自己试验。“acid”“berries-dark”“berries-light”“bipolar”“blacknblue”“bright”“contrast”“darkblue”“darkness”“desert”“dull”“easter”“emacs”“golden”“greenlcd”“ide-anjuta”“ide-codewarrior”“ide-devcpp”“ide-eclipse”“ide-kdev”"ide-msvcpp”“kwrite”“matlab”“navy”“nedit”“neon”“night”“pablo”“peachpuff”“print”“rand01″“random”“the”“typical”“vampire”“vim”“vim-dark”“whatis”“whitengrey”

“zellner”