你的分享就是我们的动力 ---﹥

jquery代码区高亮显示插件-Snippet

时间:2013-05-14 16:11来源:www.chengxuyuans.com 点击:

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

代码区高亮显示插件-Snippet预览图

s

高亮语言支持

原始支持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库引用到页面中

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

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

<link rel="stylesheet" type="text/css" href="css/jquery.snippet.css" />

3.) 在script标签内部的任意pre元素上调用Snippet
格式为: $(“元素的选择器”).snippet(“标签语言”,{“参数1″:”参数值”,”参数2″:”参数值”……});

$(document).ready(function(){
   $("pre.htmlCode").snippet("html");	
});

4、考虑到css样式文件的大小,如果只想用其中一种显示效果就只需要将指定样式的css放在页面中,
可以到http://www.steamdev.com/snippet/选择你喜欢的样式并复制到自己的页面中
Untitled-1
如果嫌麻烦的话可以将整个jquery.snippet.css 引用到自己的页面中

参数解析

详细参数请参见官网 http://www.steamdev.com/snippet/,但并未对参数做解析。建议查看本站的解析,亲测无误。
box:”5″
表示第几行被边框选中
Untitled
也可以写成 box:”2-6″ 则表示将2-6行的代码标记,多个段用,隔开。如 box:”5,2-6″,你将看到如下的效果:
a

boxColor: “red”
选中某行边框的边框颜色

boxFill: “black”
选中某行边框的背景颜色

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

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

menu:true
是否在右上角显示工具条
Untitled

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

hideMsg:”Collapse Code”
当collapse为true时,隐藏代码区的按钮文字,建议换成中文
Untitled

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”

代码区高亮显示插件-Snippet下载地址

网盘下载:http://pan.baidu.com/share/link?shareid=212875&uk=2166814920

转载注明地址:http://www.chengxuyuans.com/jquery_plugin/Snippet.html