目前使用的代码高亮(语法高亮)是Google Prettify,prettify.js,而早期一直在用Syntaxhighlighter,双击代码是可以全选的。另外,使用火狐貌似不支持点击直接复制的动作,所以打算在prettify上实现Syntaxhighlighter双击全选的功能,这一试不知道,要折腾的东西非常多。
百度了好久,思路和代码99%为原创,执行逻辑还比较拙劣,凑合着用,直接上代码吧:
JS脚本(不会正则,徒增许多重复工作)
jQuery(document).ready(function() {
copyCode();
});
// 复制代码
function copyCode(){
$('#main pre .copycode').click(function(){
var rGet = ['</span></li>'];
var rRplace = ['n</span></li>'];
var arrayGet = [
'<li class="L0">','<li class="L1">','<li class="L2">','<li class="L3">','<li class="L4">','<li class="L5">','<li class="L6">','<li class="L7">','<li class="L8">','<li class="L9">',
'</span></li>','</span><span class="pln">','</span><span class="pun">','</span><span class="kwd">','</span><span class="com">','</span><span class="str">','</span><span class="tag">','</span><span class="atn">','</span><span class="atv">','</span><span class="lit">',
'<span class="pln">','<span class="pun">','<span class="kwd">','<span class="com">','<span class="str">','<span class="tag">','<span class="atn">','<span class="atv">','<span class="lit">',
];
var arrayReplace = ['','','','','','','','','','',
'','','','','','','','','','',
'','','','','','','','','',
];
var _codeol = $(this).next();
var _codepre = $(this).parent();
var _codeh = $(this).parent().height();
var allcode = _codeol.html();
var formatcode = allcode.arrReplace(rGet,rRplace);
var removetags = formatcode.arrReplace(arrayGet,arrayReplace);
_codepre.append('<textarea></textarea>');
_codepre.find('textarea').css({'height':_codeh+'px','position':'relative','font-size':'12px','min-height':'100px'});
_codepre.find('textarea').html(removetags).select();
_codeol.hide();
_codepre.append('<span class="returncode">Return</span>');
$("body,html").animate({scrollTop:_codepre.offset().top-50}, 600);
});
}
// 还原代码
$(document).on('click','pre .returncode',function(){
$(this).prev().prev().show();
$("body,html").animate({scrollTop:$(this).prev().prev().offset().top-50}, 600);
$(this).prev().remove();
$(this).remove();
});
// 批量替换
String.prototype.arrReplace = function(find, replace) {
var replaceStr = this;
var newArray;
for (var i = 0; i < find.length; i++) {
newArray = new RegExp(find[i], "g");
replaceStr = replaceStr .replace(newArray, replace[i]);
}
return replaceStr;
};
相关CSS
pre .copycode{padding:5px 8px;line-height:17px;color:#fff;background:#3d4450;display:none;position:absolute;right:0;top:0;cursor:pointer}
pre .returncode{padding:5px 8px;line-height:17px;color:#fff;background:#3d4450;position:absolute;right:0;top:0;cursor:pointer}
pre:hover .copycode{display:block}
pre textarea:hover .returncode{display:block}
