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


Posted in Javascript onDecember 14, 2011

没想到最近(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(/(<br\s*\/?>){3}/gi, '<br/><br/>')); 
if ($(this).find("div.cnblogs_code_hide").length == 0) { 
if (parseInt($(this).css("height"), 10) > 30) { 
showCopyCode($(this)); 
var regex = /<script\s+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(/<br\s*\/?>/ig, '\n') 
.replace(/<[^>]*>/g, ''); 
cbCode = cbCode.replace(/\n(\s*\d+)/ig, '\n'); 
cbCode = cbCode.replace(/\n/g, '\r\n'); 
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

打包下载
Javascript 相关文章推荐
一个选择最快的服务器转向代码
Apr 27 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 Javascript
JS弹出层单纯的绝对定位居中示例代码
Feb 18 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
Mar 04 Javascript
浅谈JS原生Ajax,GET和POST
Jun 08 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
Feb 14 Javascript
js使用xml数据载体实现城市省份二级联动效果
Nov 08 Javascript
Nuxt使用Vuex的方法示例
Sep 06 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
React四级菜单的实现
Apr 08 Javascript
js 可拖动列表实现代码
Dec 13 #Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
Dec 12 #Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
Dec 12 #Javascript
背景图跟随鼠标移动的Mootools插件实现代码
Dec 12 #Javascript
用Mootools获得操作索引的两种方法分享
Dec 12 #Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 #Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 #Javascript
You might like
兼容性比较好的PHP生成缩略图的代码
2011/01/12 PHP
详解PHP数组赋值方法
2015/11/07 PHP
Yii2 RESTful中api的使用及开发实例详解
2016/07/06 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
window resize和scroll事件的基本优化思路
2014/04/29 Javascript
获取中文字符串的实际长度代码
2014/06/05 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
keras K.function获取某层的输出操作
2020/06/29 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
汉语专业应届生求职信
2013/10/01 职场文书
行政助理的职责
2013/11/14 职场文书
读书心得体会
2013/12/28 职场文书
点菜员岗位职责范本
2014/02/14 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书
2016大学优秀学生干部事迹材料
2016/03/01 职场文书
导游词之西递宏村
2019/12/10 职场文书