syntaxhighlighter 代码高亮 - 插件化
之前做过很多网站,不同的网站也都有不同的经验总结,只是前些年都不怎么注重线上博客。由于现在自身技能的不断丰富,个人的插件库、总结性的经验文档、项目解析实例等等,也都逐渐丰富起来。着实令自己迎难而上的信心倍增。
之前按照老板需求,给自家公司做过一个教育类的推广网站,只是当时没有UI设计,一直也不得闲,后来被老板叫停说等以后有空闲再谈这个。所以,也一直没有将经验放到网上去。
如今,再整理自己的个人博客,发现很多东西还是不能放到自己的硬盘里,得传到网上去。一来,可以方便自己使用;二来,便于网络组件库的集成与实例化统计;三来,就是方便分享给大家,交流技术。
所以,在今天整理本地博客的时候,现将代码高亮插件的实例化封装,传于网络,以便于日后类似应用的参考与学习。
一、插件说明:
注意: 已经封装为实例代码。可参考使用。
插件版本:syntaxhighlighter_2.1.364
插件支持语言:JavaScript、CSS、PHP、Java、Python、Vb、XML、Delphi、SQL、CSharp等等多种编程语言类
二、 插件的使用:
以 JavaScript
脚本语言 为例,步骤如下:
- 引入 javascript 格式刷
- 调用 javascript 格式刷
效果图:
实例 html 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript高亮demo</title>
<script type="text/javascript" src="syntaxhighlighter_2.1.364/scripts/shCore.js"></script>
<!-- 引入 javascript 格式刷 -->
<script type="text/javascript" src="syntaxhighlighter_2.1.364/scripts/shBrushJScript.js"></script>
<link type="text/css" rel="stylesheet" href="syntaxhighlighter_2.1.364/styles/shCore.css"/>
<!--高亮显示 主题CSS文件-->
<link type="text/css" rel="stylesheet" href="syntaxhighlighter_2.1.364/styles/shThemeMidnight.css"/>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'syntaxhighlighter_2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.config.strings = {//该为中文配置
expandSource : '展开代码',
viewSource : '查看代码',
copyToClipboard : '复制代码',
copyToClipboardConfirmation : '代码复制成功',
print : '打印',
help: '?',
alert: '语法高亮\n\n',
noBrush: '不能找到刷子: ',
brushNotHtmlScript: '刷子没有配置html-script选项',
aboutDialog: '<div></div>'
};
SyntaxHighlighter.all();
</script>
</head>
<body>
<h1>JavaScript代码高亮 - demo<br /></h1>
<!-- 调用 javascript 格式刷 -->
<pre class="brush:javascript;">
$(document).ready(function(){
animate();
$(".play").click(animate).mouseover(function(){
$(".play").css({"background-color":"#A55"});
}).mouseout(function(){
$(".play").css({"background-color":"#060"});
});
});
function animate(){
$('div>div>div').each(function(id){
$(this).css({
position: 'relative',
top: '-200px',
opacity: 0
});
var wait = Math.floor((Math.random()*3000)+1);
$(this).delay(wait).animate({
top: '0px',
opacity: 1
},1000);
});
}
</pre>
</body>
</html>
三、插件下载:
以上就是关于“ syntaxhighlighter 代码高亮 - 插件化 ” 的全部内容。