zero-clipboard demo

copy-pre-code.html

<style>
.zero-clipboard {
    position: relative;
}
.btn-clipboard {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    display: block;
    padding: 5px 8px;
    border: 1px solid #ccc;
    border-radius: 0 4px 0 4px;
    font-size: 12px;
    background-color: #fff;
    cursor: pointer;
}

pre.code {
    border: 1px solid #ccc;
    background-color: #F7F7F9;
    padding: 9px 14px;
}
</style>

<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>

<pre class="code">
public static void main() {
   ...
}
</pre>

<script type="text/javascript">
$(function() {
    $("pre > code.highlight").each(function() {
        var $copy = '<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>';
        $(this).parent().before($copy);
    });
});
</script>

zero-clipboard.js

// see https://github.com/zeroclipboard/zeroclipboard/

/**
required jquery
required bootstrap 3.x
required zero-clipboard 2.x

css:
    .zeroclipboard-is-hover {
        color: #FFF;
        background-color: #563D7C;
        border-color: #563D7C;
    }
    .zeroclipboard-is-active {
    }

html:
    <span type="button" class="btn btn-default btn-clipboard" data-clipboard-text="Copy Text ...">Copy</span> 

    <div id="CopyElement">...</div>
    <span type="button" class="btn btn-default btn-clipboard" data-clipboard-target="#CopyElement">Copy</span> 
*/

$(function() {
    var clip = new ZeroClipboard($(".btn-clipboard"));
    var $bridge = $("#global-zeroclipboard-html-bridge");
 
    clip.on("ready", function(e) {
        $bridge.data("placement", "left").attr("title", "Copy to clipboard").tooltip();
    });
 
    clip.on("copy", function(e) {
        //var c = $(e.target).parent().next();
        //clip.setText(c.text());
        
        var c = $(e.target);
        var text = c.attr("data-clipboard-text");
        if (text === undefined) {
            var selector = c.attr("data-clipboard-target");
            if (selector !== undefined) {
                text = $(selector).text();
            }
        }
        clip.setText(text);
    });
 
    clip.on("aftercopy", function(e) {
        $bridge.attr("title", "Copied!").tooltip("fixTitle").tooltip("show").attr("title", "Copy to clipboard").tooltip("fixTitle");
    });
 
    clip.on("error", function(e) {
        $bridge.attr("title", e.message).tooltip("fixTitle").tooltip("show");
    });
});