geoffreymcgill/index.html

## index.html
<!doctype html>

<html>
<head>
	<title>Prism Copy to Clipboard sample</title>
	<link rel="stylesheet" href="prism.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="toolbar.css" type="text/css" media="screen" />
	<script type="text/javascript" src="prism.js"></script>

	<!-- Adapted from http://dev.misterphilip.com/prism/plugins/toolbar/ -->
	<script type="text/javascript" src="toolbar.js"></script>

	<!-- Download at http://zeroclipboard.org/

		 Be sure to include ZeroClipboard.swf and ZeroClipboard.min.map
		 within the same directory your ZeroClipboard.js file
	-->
	<script type="text/javascript" src="ZeroClipboard.js"></script>
</head>
<body>
<pre class="code-toolbar">
<code class="language-javascript">
(function () {
	var msg = "A simple test";

	console.log(msg);
})();
</code>
</pre>
</body>
</html>

## toolbar.css
pre.code-toolbar {
    position: relative;
}
    pre.code-toolbar > .toolbar {
        position: absolute;
        top: .3em;
        right: .2em;
        background: #f5f2f0;
        background: rgba(224,224,224,.2);
        border-radius: .5em;
    }
        pre.code-toolbar > .toolbar a {
            color: #bbb;
            font-size: .8em;
            cursor: pointer;
            padding: 0 .5em;
        }
        pre.code-toolbar > .toolbar a:hover,
        pre.code-toolbar > .toolbar a:focus,
        pre.code-toolbar > .toolbar a.zeroclipboard-is-hover {
            color: inherit;
        }

## toolbar.js
// Original copyright Philip Lawrence
// http://dev.misterphilip.com/prism/plugins/toolbar/

(function () {
    if (!self.Prism) {
        return;
    }

    // Attach our hook, only for those parts that we highlighted
    Prism.hooks.add('after-highlight', function (env) {

        // Check if inline or actual code block (credit to line-numbers plugin)
        var pre = env.element.parentNode;

        if (!pre || !/pre/i.test(pre.nodeName) || pre.className.indexOf('code-toolbar') === -1) {
            return;
        }

        // Setup the toolbar
        var toolbar = document.createElement('div');
            toolbar.setAttribute('class', 'toolbar');

        // Copy to clipboard button, requires ZeroClipboard
        if (window.ZeroClipboard)
        {
            var linkCopy = document.createElement('a');
            linkCopy.innerHTML = 'Copy to clipboard';

            var client = new ZeroClipboard(linkCopy);

            client.on("ready", function (event) {
                client.on("copy", function (event) {
                    var node = event.target.parentNode.parentNode.getElementsByTagName('code')[0];
                    event.clipboardData.setData('text/plain', node.textContent || node.innerText);
                } );
                client.on("aftercopy", function (event) {
                    alert("Code copied to clipboard");
                    event.target.parentNode.parentNode.getElementsByTagName('code')[0].focus();
                } );
            } );

            toolbar.appendChild(linkCopy);
        }

        // Add our toolbar to the <pre> tag
        pre.appendChild(toolbar);
    });
})();
	<!doctype html>

	<html>
	<head>
	<title>Prism Copy to Clipboard sample</title>
	<link rel="stylesheet" href="prism.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="toolbar.css" type="text/css" media="screen" />
	<script type="text/javascript" src="prism.js"></script>

	<!-- Adapted from http://dev.misterphilip.com/prism/plugins/toolbar/ -->
	<script type="text/javascript" src="toolbar.js"></script>

	<!-- Download at http://zeroclipboard.org/

	Be sure to include ZeroClipboard.swf and ZeroClipboard.min.map
	within the same directory your ZeroClipboard.js file
	-->
	<script type="text/javascript" src="ZeroClipboard.js"></script>
	</head>
	<body>
	<pre class="code-toolbar">
	<code class="language-javascript">
	(function () {
	var msg = "A simple test";

	console.log(msg);
	})();
	</code>
	</pre>
	</body>
	</html>
	pre.code-toolbar {
	position: relative;
	}
	pre.code-toolbar > .toolbar {
	position: absolute;
	top: .3em;
	right: .2em;
	background: #f5f2f0;
	background: rgba(224,224,224,.2);
	border-radius: .5em;
	}
	pre.code-toolbar > .toolbar a {
	color: #bbb;
	font-size: .8em;
	cursor: pointer;
	padding: 0 .5em;
	}
	pre.code-toolbar > .toolbar a:hover,
	pre.code-toolbar > .toolbar a:focus,
	pre.code-toolbar > .toolbar a.zeroclipboard-is-hover {
	color: inherit;
	}
	// Original copyright Philip Lawrence
	// http://dev.misterphilip.com/prism/plugins/toolbar/

	(function () {
	if (!self.Prism) {
	return;
	}

	// Attach our hook, only for those parts that we highlighted
	Prism.hooks.add('after-highlight', function (env) {

	// Check if inline or actual code block (credit to line-numbers plugin)
	var pre = env.element.parentNode;

	if (!pre \|\| !/pre/i.test(pre.nodeName) \|\| pre.className.indexOf('code-toolbar') === -1) {
	return;
	}

	// Setup the toolbar
	var toolbar = document.createElement('div');
	toolbar.setAttribute('class', 'toolbar');

	// Copy to clipboard button, requires ZeroClipboard
	if (window.ZeroClipboard)
	{
	var linkCopy = document.createElement('a');
	linkCopy.innerHTML = 'Copy to clipboard';

	var client = new ZeroClipboard(linkCopy);

	client.on("ready", function (event) {
	client.on("copy", function (event) {
	var node = event.target.parentNode.parentNode.getElementsByTagName('code')[0];
	event.clipboardData.setData('text/plain', node.textContent \|\| node.innerText);
	} );
	client.on("aftercopy", function (event) {
	alert("Code copied to clipboard");
	event.target.parentNode.parentNode.getElementsByTagName('code')[0].focus();
	} );
	} );

	toolbar.appendChild(linkCopy);
	}

	// Add our toolbar to the <pre> tag
	pre.appendChild(toolbar);
	});
	})();