仿csdn代码高亮样式，拷贝兼容chrome、firefox

最新推荐文章于 2026-05-22 15:01:34 发布

原创最新推荐文章于 2026-05-22 15:01:34 发布 · 1.5k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#csdn #代码样式 #chrome #firefox

杂专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何仿制csdn的代码高亮样式，并解决在Chrome和Firefox中复制代码的问题。作者通过从csdn获取js代码并使用zeroclipboard库解决了浏览器兼容性问题。详细步骤包括代码下载、所需修改的两个部分以及针对窗口变化和图片加载延迟的调整。文章提供了一份最终版的下载链接。

最终效果图如下所示：

首先，这里说“仿”其实不合适，因为其实跟抄袭基本是一样，因为各种js代码是从csdn上拷贝下来的。= =不知道会不会有版权问题，但我个人确实超喜欢csdn的这个代码展示，所以就照着抄了一个，放到自己的blog上面去了。如果存在版权问题神马的，跪求通知一声，立马换掉= =

这个最终的成功是建立在：

http://download.csdn.net/detail/wishcodes/3580490

的基础上的。这份代码已经很完美了，基本，只是会有一个在chrome和firefox浏览器上面，那个拷贝功能会因为安全问题显示不出来。

然后我做的，只是用zeroclipboard把这个问题解决掉。当然，是用firefox查看csdn的源码，慢慢折腾出来的。不过，这对我来说，确实挑战难度比较大，要知道朕只是一个纯后端的程序员，css、js神马的压根还没怎么折腾过有木有，当年只是折腾过用css写过一封简历，╮(╯▽╰)╭

好吧，废话不多说，直接贴代码吧。

下载地址。

http://download.csdn.net/detail/lingchen_yu/8239169

注意：

那个拷贝效果要挂到网上才看得到，即使是本地挂在Apache上。如果要挂到自己的blog上，要修改两个地方：

第一个：

第二个：

这里clipboard.swf要修改为自己blog上的地址，如“ http://www.域名.com/js/scripts/clipboard.swf ”。至于不这样改能不能成功，这我没试过，但我这样改是成功的╮(╯▽╰)╭。

ZeroClipboard.swf同理。

好吧，既然能搜到这里，我相信修改这两个东东，应该不需要多废话虾米。

最近发现当窗口发生变化时，zeroclipborad不会自动调整位置，所以又折腾了一下，由于那资源不能删除，那么就再手动替换一下吧，很抱歉之前没发现这个问题= =

将setCopyBtn()方法替换为如下代码：

var clips = new Array();
var resizeTimer = null;
function setCopyBtn() {
    clips.length = 0;
    $('.CopyToClipboard').each(function() {
        var b = new ZeroClipboard.Client();
        clips.push(b);
        b.setHandCursor(true);
        b.addEventListener('load', function(c) {
        });
        b.addEventListener('mouseOver', function(c) {
            var d = c.movie.parentNode.parentNode.parentNode.parentNode.nextSibling.innerHTML;
            d = d.replace(/</g, '<').replace(/>/g, '>').replace(/&/g, '&');
            c.setText(d)
        });
        b.addEventListener('complete', function(c, d) {
            alert('代码已经复制到你的剪贴板。')
        });
        b.glue(this, this.parentNode);
    
    });
    window.onresize = function() {
        if (resizeTimer == null) {
            resizeTimer = setTimeout("doResize()", 1000);
        }
    }
}

function doResize() {
    for (var i = 0; i < clips.length; i++) {
        clips[i].reposition();
    }
    resizeTimer = null;
}

暂时测试没发现问题，有问题再折腾吧，= =！

好吧，又发现问题了，可能是由于网速的原因，导致图片加载比较慢，有时候一开始打开网页的时候，立刻点击拷贝会拷贝失败，就是执行回zeroclipboard原来的方法，截图如下(看弹窗就行, 另一个是blog内容)：

网速加载慢时会不能拷贝的截图

解决方法暂时做得比较笨，还是要重新替换一下，最终截图如下：

替换代码截图

其中，代码如下，注意前面标点符号神马的：

  CopyToClipboard: {
        label: 'copy',
        check: function() {
            return window.clipboardData != null || dp.sh.ClipboardSwf != null
        },
        func: function(e, g) {
            e = dp.sh.Utils.FixForBlogger(g.originalCode).replace(/</g, '<').replace(/>/g, '>').replace(/&/g, '&');
            if (window.clipboardData) {
                window.clipboardData.setData('text', e)
            } else {
                //if (dp.sh.ClipboardSwf != null) {
                //    var f = g.flashCopier;
                //    if (f == null) {
                //       f = document.createElement('div');
                //        g.flashCopier = f;
                //        g.div.appendChild(f)
                //    }
                //    f.innerHTML = '<embed src="' + dp.sh.ClipboardSwf + '" FlashVars="clipboard=' + encodeURIComponent(e) + '" width="0" height="0" type="application/x-shockwave-flash"></embed>'
                //}
				doResize();
				alert('拷贝失败，请再拷贝一次');
				return;
            }
            alert('The code is in your clipboard now')
        }
    }

好吧，暂时先酱紫用着了= =

【20151217】更新：上传了一份之前折腾出来的最终版，本地挂在nginx上测试了一下是没什么问题的，而且这也是我那博客在用的，当然压缩js神马的，自己折腾一下就好了。

下载地址