cnblogs 代码高亮显示后的代码复制问题解决实现代码
2018-10-12 13:58
756 查看
没想到最近(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
打包下载
相关文章推荐
- cnblogs 代码高亮显示后的代码复制问题解决实现代码
- 插件insertpre+语法高亮插件google-code-prettify,解决CKEditor4代码高亮显示问题
- vb.net从DataGridView复制到Excel.代码实现,解决中文乱码问题 (转载+亲自实践)
- .net从DataGridView复制到Excel.代码实现。解决乱码问题
- SWF文字查询及高亮显示——第三步:实现文字查询高亮显示及解决MovieClip帧切换时关键字无法高亮显示的问题
- 如何解决eclipse中代码拷贝到word文档中高亮显示的问题
- Javascript实现的CSS代码高亮显示
- 用js查找法实现当前栏目的高亮显示的代码
- 用js查找法实现当前栏目的高亮显示的代码
- 链栈代码实现及背包问题解决
- [转-来自啊泰]推模式下dataset1下显示的是"...未找到项目..." 问题的解决 [http://www.cnblogs.com/babyt/archive/2005/04/15/138582.html]
- 实现aspx页面中,获得焦点,高亮显示,离开时恢复 效果(完整代码)
- FCKEditor与SyntaxHighlighter整合实现代码高亮显示
- FCKEditor SyntaxHighlighter整合实现代码高亮显示
- 利用DhtmlXtree实现展现,修改,添加,删除,移动功能一棵树上实现,iframe的单个滑动条显示,包含在iframe中树节点中文内容过长问题解决
- 应用框架的设计与实现——.NET平台4.2代码测试问题解决
- [转-来自啊泰]推模式下dataset1下显示的是"...未找到项目..." 问题的解决[补充] [http://www.cnblogs.com/babyt/archive/2005/04/15/138588.html]
- MinimizeName在C#中的实现代码(解决了我那个GDI+的问题)
- 解决FCKEditor在浏览器返回时显示html代码的问题
- 让你的博客轻松实现代码高亮显示