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.


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.

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;
    var c = a(this);
    clip.addEventListener("complete", function () {

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>');
        "d_clip_container_" + b)
a(".codecolorer-container").on("mouseenter", function () {
}).on("mouseleave", function () {

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("<pre><code><xmp>" +
        b + "</xmp></code></pre>");
Sam Deering Sam Deering
Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.
  • 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 :)

Stay ahead of the game Exclusive content for developers and digital experts Go Premium