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) {
        "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");
" +
        b + "


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.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • 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 :)

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.