代码高亮插件之snippet基础使用
JavaScipt
2018-12-18 18:04:09
代码高亮,在技术博客中是不可或缺的一部分。本博客就才用的是snippet高亮插件,该篇文章也将就snippet如何使用进行基础的介绍。
完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="scripts/jquery.snippet.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="scripts/jquery.snippet.js"></script>
</head>
<body>
< pre >< code ><!DOCTYPE html><br><html><br> <head><br> <meta charset="UTF-8"><br> <title></title><br> <link rel="stylesheet" type="text/css" href="scripts/jquery.snippet.css"/><br> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><br> <script src="scripts/jquery.snippet.js"></script><br> </head><br> <body><br> <br> <script><br> $("pre").snippet("javascript", { style: "acid", collapse: true, startCollapsed: false});<br> </script> <br> </body><br></html>< / code >< / pre>
<script>
$("pre").snippet("javascript", { style: "acid", collapse: true, startCollapsed: false});
</script>
</body>
</html>
注:如果你复制代码看效果,需将pre和code标签的空格删除下!
基础参数解释:
详细参数
box:”5″
表示第几行被边框选中
也可以写成 box:”2-6″ 则表示将2-6行的代码标记,多个段用,隔开。如 box:”5,2-6″,你将看到如下的效果:
boxColor: “red”
选中某行边框的边框颜色
boxFill: “black”
选中某行边框的背景颜色
clipboard: “ZeroClipboard.swf”
这个值基本上是定死的,至今还未搞懂clipboard继承的用法,因为我在用的时候可以显示”copy”字样,但是点击没反应,研究中….
transparent:false
是否让代码区的背景显示为透明,即没有后面的背景和边框,一般默认为不透明
menu:true
是否在右上角显示工具条
collapse:false
是否有 显示/隐藏 的工具条,默认为false,可以开启
hideMsg:”Collapse Code”
当collapse为true时,隐藏代码区的按钮文字,建议换成中文
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”
了解更多,大家可以去官网查看!
jq插件库,网站地址:http://www.jq22.com/jquery-info33

891篇文章
2528人已阅读