Skip to main content

Copy Clipboard with CodeColorer Syntax Highlighter

By Sam Deering

JavaScript

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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('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); }});

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

Get practical advice to start your career in programming!


Master complex transitions, transformations and animations in CSS!