目前使用的代码高亮(语法高亮)是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}