Copy Clipboard with CodeColorer Syntax Highlighter

Sam Deering

Ok so here’s some code I used to add the copy to clipboard to the code snippets on this blog. This follows on from jQuery copy clipboard 4 options post which has a few options. The demo for this is on this page. This option uses Zero Clipboard plugin and a SWF file to accomplish the copy to clipboard on click.

copy-clipboard-plain

1: Add the CodeColorer plugin

Add the CodeColorer WordPress plugin (+ configure your display settings – color scheme etc..)

2: Add the ZeroClipboard plugin

Add the ZeroClipboard plugin to your page.
ZeroClipboard.min.js

3: Setup the ZeroClipboard plugin

With Code Colorer generated HTML tags.

 
ZeroClipboard.setMoviePath("http://" + window.location.hostname + "/files/ZeroClipboard.swf");
a(".copy").mouseover(function () {
    var b = a(this).parents(".codecolorer-container:first").find(".codecolorer:first").text();
    clip = new ZeroClipboard.Client;
    clip.setHandCursor(!0);
    clip.setText(b);
    clip.glue(this);
    var c = a(this);
    clip.addEventListener("complete", function () {
        c.text("copied!").fadeIn("slow")
    })
});

4: Add the copy to clipboard

Attach the copy to clipboard button to all of your code snippets on the page.

 
a(".codecolorer-container").each(function (b) {
    a(this).prepend('<div id="d_clip_container" style="position:relative;float: right;"><a class="plain" id="code-plain-btn">Plain</a> <a class="copy" id="d_clip_button_' + b + '">Copy</a></div>');
    a(this).attr("id",
        "d_clip_container_" + b)
});
a(".codecolorer-container").on("mouseenter", function () {
    a(this).find("a").addClass("showactive")
}).on("mouseleave", function () {
    a(this).find("a").removeClass("showactive")
});

5: Optionally add a view in plain (raw)

 
a(".codecolorer-container a.plain").live("click", function () {
    console.log("copy to plain..");
    var b = a(this).parents(".codecolorer-container:first").find(".codecolorer:first").text();
    this._Window = window.open("", "jQuery4u Code Snippet", "location=0,status=0,toolbar=0,dependent=1,resizable=1,menubar=0,screenX=100,screenY=100,width=600,height=400");
    this._Window.document.write("<html>");
    this._Window.document.write("<body>");
    this._Window.document.write("<pre><code><xmp>" +
        b + "</xmp></code></pre>");
    this._Window.document.write("</body>");
    this._Window.document.write("</html>")
})
ror.insertAfter(element);
}});

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://mohammadwali.in/ Mohammad Wali

    What if if we want to use it without Code Colorer plugin?

    • http://jquery4u.com/ jQuery4u

      just change the classes in the code.

      ie –

      var b = a(this).parents(“.codecolorer-container:first”).find(“.codecolorer:first”).text();

      might be

      var b = a(this).parents(“.mycode”).text();

      • http://mohammadwali.in/ Mohammad Wali

        Thanks for your help but i had done it earlier and its working well Thankyou very much for this :)