Copy Clipboard with CodeColorer Syntax Highlighter

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.
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('Plain Copy');
    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("");
    this._Window.document.write("");
    this._Window.document.write("" +
        b + "
");
    this._Window.document.write("");
    this._Window.document.write("")
})
ror.insertAfter(element);
}});