cnblogs 代码高亮显示后的代码复制问题解决实现代码

157 阅读 0 评论 104 点赞

我是靠谱客的博主负责月光，最近开发中收集的这篇文章主要介绍cnblogs 代码高亮显示后的代码复制问题解决实现代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

没想到最近(2012年12月份)实现代码复制问题，要不所有内容都是一行，只有拥有工具的人士才能很快的看到代码，这样代码用起来就简单多了，可以直接复制了啊，不用每次是转化什么的。
这篇文章技术是技术为主，看看他们用了什么方法，需要的朋友可以参考下。为方便备份，先打包一份代码，有需要的自己研究。

复制代码代码如下:

//#region Copy&Run Code 

$(function () { 
var hlCodes = $("#cnblogs_post_body div.cnblogs_code"); 
if (hlCodes.length) { 
loadEncoderJs(); 
$.each(hlCodes, function () { 
var htmlContent = $(this).html(); 
$(this).html(htmlContent.replace(/(<brs*/?>){3}/gi, '<br/><br/>')); 
if ($(this).find("div.cnblogs_code_hide").length == 0) { 
if (parseInt($(this).css("height"), 10) > 30) { 
showCopyCode($(this)); 
var regex = /<scripts+type=["']text/javascript["']>/gi; 
if (regex.test($(this).text())) { 
showRunCode($(this)); 
} 
} 
} 
}); 
} 
}); 

function showCopyCode(element) { 
$(element).append('<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript：void(0);" onclick="copyCnblogsCode(this)">复制代码</a></span>'); 
} 

function loadEncoderJs() { 
var encoderJs = document.createElement('script'); 
encoderJs.type = 'text/javascript'; 
encoderJs.src = 'http://common.cnblogs.com/script/encoder.js'; 
var node = document.getElementsByTagName('script')[0]; 
node.parentNode.insertBefore(encoderJs, node); 
} 

function copyCnblogsCode(element) { 
var codeContainer = getCnblogsCodeContainer(element); 
var cbCode = getCnblogsCodeText(codeContainer); 
var textarea = document.createElement('textarea'); 
$(textarea).val(cbCode).select(); 
$(textarea).css("width", $(codeContainer).css("width")); 
$(textarea).css("height", $(codeContainer).css("height")); 
$(textarea).css("font-family", "Courier New"); 
$(textarea).css("font-size", "12px"); 
$(textarea).css("line-height", "1.5"); 
$(codeContainer).parent().html(textarea); 
$(textarea).select(); 
$("<div>按 Ctrl+C 复制代码</div>").insertAfter($(textarea)); 
} 

function getCnblogsCodeContainer(element) { 
var codeContainer = $(element).parent().parent().parent().find("pre"); 
if (codeContainer.length == 0) { 
codeContainer = $(element).parent().parent().parent().find("div").first(); 
} 
return codeContainer; 
} 

function getCnblogsCodeText(codeContainer) { 
var cbCode = 'n' + $(codeContainer).html() 
.replace(/ /g, ' ') 
.replace(/<brs*/?>/ig, 'n') 
.replace(/<[^>]*>/g, ''); 
cbCode = cbCode.replace(/n(s*d+)/ig, 'n'); 
cbCode = cbCode.replace(/n/g, 'rn'); 
if (typeof Encoder != undefined) { 
cbCode = Encoder.htmlDecode(cbCode); 
} 
cbCode = $.trim(cbCode); 
return cbCode; 
} 

function showRunCode(element) { 
var codeCopyDiv = $(element).find("div.cnblogs_code_toolbar"); 
if (codeCopyDiv.length) { 
$(codeCopyDiv).append('<span class="cnblogs_code_runjs"><a href="javascript：void(0);" onclick="runJsCode(this)">运行代码</a></span>'); 
} 
} 

function runJsCode(element) { 
var codeContainer = getCnblogsCodeContainer(element); 
var cbCode = getCnblogsCodeText(codeContainer); 
var newwin = window.open('', "_blank", ''); 
newwin.document.open('text/html', 'replace'); 
newwin.opener = null; 
newwin.document.write(cbCode); 
newwin.document.close(); 
} 

//#endregion