代码区高亮显示插件-SNIPPET

所属分类:其他-杂项

 40861  337  查看评论 (7)
分享到微信朋友圈
X
代码区高亮显示插件-SNIPPET ie兼容6

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库引用到页面中

<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放在页面中
如果嫌麻烦的话可以将整个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”
相关插件-杂项

超强PDF在线预览插件

该插件利用HTM5技术实现了对PDF文件的在线预览功能
  杂项
 241408  682

jQuery弹出表单录入商品信息无刷新追加行

jQuery弹出表单录入商品信息无刷新追加行特效代码
  杂项
 32321  381

vue.js实现增删改查(原创)

bootstrap布局,vue.js实现增删改查功能,模态框新增与编辑
  杂项
 36159  397

JS文字球状放大效果

纯js实现文字文字放大效果
  杂项
 35911  470

讨论这个项目(7)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    我是大猴子 0
    2020/9/23 15:55:30
    请问html为什么无法显示的呢
        晴朗0
        2023/6/13 19:38:37
        将< 和 > 替换成<span><</span> 和 <span>></span>试试
    回复
    .Vv.. 0
    2017/7/19 11:59:44
    <php
    echo 1;
    ?>

    都是

    回复
    Cacti 0
    2016/12/28 13:12:32
    小新没有蜡笔 0
    2016/11/24 17:11:38
    html的标签根本就显示不了 回复
    ?(???)? 0
    2016/5/10 20:05:39
    这怎么给显示隐藏弄中文 回复
    汉斯 1
    2016/3/4 14:03:17

    详细参数请参见官网**页面中的这个官网是什么鬼。。。。。。。。。。。。。。。。。。。。吓死我了 - -

        汉斯0
        2016/3/4 14:03:34
        你光把我这个改了也没用啊!你得把上面描述中的 官网 地址改掉  呵呵
        西瓜0
        2016/3/4 14:03:06
        别急啊,以经改好了。
    回复
    汉斯 0
    2016/3/4 13:03:52
    演示一片空白。。。。。DEMO出问题了? 回复
    吕外外LY 0
    2015/2/8 17:28:40
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复