代码高亮插件之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

六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！