PrismJS · Golmote · Nov 9, 2016 · Feb 13, 2016 · Feb 13, 2016 · Feb 24, 2016
diff --git a/components.js b/components.js
@@ -582,7 +582,9 @@ var components = {
 		},
 		"show-language": {
 			"title": "Show Language",
-			"owner": "nauzilus"
+			"owner": "nauzilus",
+			"noCSS": true,
+			"require": "toolbar"
 		},
 		"jsonp-highlight": {
 			"title": "JSONP Highlight",
@@ -654,6 +656,16 @@ var components = {
 			"title": "Data-URI Highlight",
 			"owner": "Golmote",
 			"noCSS": true
+		},
+		"toolbar": {
+			"title": "Toolbar",
+			"owner": "mAAdhaTTah"
+		},
+		"copy-to-clipboard": {
+			"title": "Copy to Clipboard Button",
+			"owner": "mAAdhaTTah",
+			"require": "toolbar",
+			"noCSS": true
 		}
 	}
 };
diff --git a/package.json b/package.json
@@ -17,6 +17,9 @@
   "author": "Lea Verou",
   "license": "MIT",
   "readmeFilename": "README.md",
+  "optionalDependencies": {
+    "clipboard": "^1.5.5"
+  },
   "devDependencies": {
     "chai": "^2.3.0",
     "gulp": "^3.8.6",

diff --git a/plugins/copy-to-clipboard/index.html b/plugins/copy-to-clipboard/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+	<meta charset="utf-8" />
+	<link rel="shortcut icon" href="favicon.png" />
+	<title>Copy to Clipboard ▲ Prism plugins</title>
+	<base href="../.." />
+	<link rel="stylesheet" href="style.css" />
+	<link rel="stylesheet" href="themes/prism.css" data-noprefix />
+	<link rel="stylesheet" href="plugins/toolbar/prism-toolbar.css" data-noprefix />
+	<script src="prefixfree.min.js"></script>
+
+	<script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
+	<script src="http://www.google-analytics.com/ga.js" async></script>
+</head>
+<body class="language-markup">
+
+<header>
+	<div class="intro" data-src="templates/header-plugins.html" data-type="text/html"></div>
+
+	<h2>Copy to Clipboard</h2>
+	<p>Add a button that copies the code block to the clipboard when clicked.</p>
+</header>
+
+<section>
+	<h1>How to use</h1>
+	<p>In addition to including the plugin file with your PrismJS build, ensure <a href="https://clipboardjs.com/">Clipboard.js</a> is loaded before the plugin.</p>
+
+	<p>The simplest way to include Clipboard.js is to use any of the
+		<a href="https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers">recommended CDNs</a>. If you're using Browserify, Clipboard.js will be loaded auotmatically
+		if it's included in your <code>package.json</code>.
+		If you don't load Clipboard.js yourself, the plugin will load it from a CDN for you.</p>
+
+	<pre data-src="plugins/copy-to-clipboard/prism-copy-to-clipboard.js"></pre>
+</section>
+
+<footer data-src="templates/footer.html" data-type="text/html"></footer>
+
+<script src="prism.js"></script>
+<script src="plugins/toolbar/prism-toolbar.js"></script>
+<script src="plugins/copy-to-clipboard/prism-copy-to-clipboard.js"></script>
+<script src="utopia.js"></script>
+<script src="components.js"></script>
+<script src="code.js"></script>
+
+</body>
+</html>
diff --git a/plugins/copy-to-clipboard/prism-copy-to-clipboard.js b/plugins/copy-to-clipboard/prism-copy-to-clipboard.js
@@ -0,0 +1,75 @@
+(function(){
+	if (typeof self === 'undefined' || !self.Prism || !self.document) {
+		return;
+	}
+
+	if (!Prism.plugins.toolbar) {
+		console.warn('Copy to Clipboard plugin loaded before Toolbar plugin.');
+
+		return;
+	}
+
+	var Clipboard = window.Clipboard || undefined;
+
+	if (!Clipboard && typeof require === 'function') {
+		Clipboard = require('clipboard');
+	}
+
+	var callbacks = [];
+
+	if (!Clipboard) {
+		var script = document.createElement('script');
+		var head = document.querySelector('head');
+
+		script.onload = function() {
+			Clipboard = window.Clipboard;
+
+			if (Clipboard) {
+				while (callbacks.length) {
+					callbacks.pop()();
+				}
+			}
+		};
+
+		script.src = 'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.8/clipboard.min.js';
+		head.appendChild(script);
+	}
+
+	Prism.plugins.toolbar.registerButton('copy-to-clipboard', function (env) {
+		var linkCopy = document.createElement('a');
+		linkCopy.textContent = 'Copy';
+
+		if (!Clipboard) {
+			callbacks.push(registerClipboard);
+		} else {
+			registerClipboard();
+		}
+
+		return linkCopy;
+
+		function registerClipboard() {
+			var clip = new Clipboard(linkCopy, {
+				'text': function () {
+					return env.code;
+				}
+			});
+
+			clip.on('success', function() {
+				linkCopy.textContent = 'Copied!';
+
+				resetText();
+			});
+			clip.on('error', function () {
+				linkCopy.textContent = 'Press Ctrl+C to copy';
+
+				resetText();
+			});
+		}
+
+		function resetText() {
+			setTimeout(function () {
+				linkCopy.textContent = 'Copy';
+			}, 5000);
+		}
+	});
+})();
diff --git a/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js b/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js
diff --git a/plugins/show-language/index.html b/plugins/show-language/index.html
@@ -8,7 +8,7 @@
 <base href="../.." />
 <link rel="stylesheet" href="style.css" />
 <link rel="stylesheet" href="themes/prism.css" data-noprefix />
-<link rel="stylesheet" href="plugins/show-language/prism-show-language.css" data-noprefix />
+<link rel="stylesheet" href="plugins/toolbar/prism-toolbar.css" data-noprefix />
 <script src="prefixfree.min.js"></script>
 
 <script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
@@ -25,7 +25,7 @@ <h2>Show Language</h2>
 
 <section>
 	<h1>Examples</h1>
-	
+
 	<h2>JavaScript</h2>
 	<pre data-src="plugins/show-language/prism-show-language.js"></pre>
 
@@ -43,6 +43,7 @@ <h2>SVG</h2>
 <footer data-src="templates/footer.html" data-type="text/html"></footer>
 
 <script src="prism.js"></script>
+<script src="plugins/toolbar/prism-toolbar.js"></script>
 <script src="plugins/show-language/prism-show-language.js"></script>
 <script src="utopia.js"></script>
 <script src="components.js"></script>

diff --git a/plugins/show-language/prism-show-language.css b/plugins/show-language/prism-show-language.css
diff --git a/plugins/show-language/prism-show-language.js b/plugins/show-language/prism-show-language.js
@@ -4,35 +4,25 @@ if (typeof self === 'undefined' || !self.Prism || !self.document) {
 	return;
 }
 
+if (!Prism.plugins.toolbar) {
+	console.warn('Show Languages plugin loaded before Toolbar plugin.');
+
+	return;
+}
+
 // The languages map is built automatically with gulp
 var Languages = /*languages_placeholder[*/{"html":"HTML","xml":"XML","svg":"SVG","mathml":"MathML","css":"CSS","clike":"C-like","javascript":"JavaScript","abap":"ABAP","actionscript":"ActionScript","apacheconf":"Apache Configuration","apl":"APL","applescript":"AppleScript","asciidoc":"AsciiDoc","aspnet":"ASP.NET (C#)","autoit":"AutoIt","autohotkey":"AutoHotkey","basic":"BASIC","csharp":"C#","cpp":"C++","coffeescript":"CoffeeScript","css-extras":"CSS Extras","fsharp":"F#","glsl":"GLSL","graphql":"GraphQL","http":"HTTP","inform7":"Inform 7","json":"JSON","latex":"LaTeX","livescript":"LiveScript","lolcode":"LOLCODE","matlab":"MATLAB","mel":"MEL","nasm":"NASM","nginx":"nginx","nsis":"NSIS","objectivec":"Objective-C","ocaml":"OCaml","parigp":"PARI/GP","php":"PHP","php-extras":"PHP Extras","powershell":"PowerShell","properties":".properties","protobuf":"Protocol Buffers","jsx":"React JSX","rest":"reST (reStructuredText)","sas":"SAS","sass":"Sass (Sass)","scss":"Sass (Scss)","sql":"SQL","typescript":"TypeScript","vhdl":"VHDL","vim":"vim","wiki":"Wiki markup","xojo":"Xojo (REALbasic)","yaml":"YAML"}/*]*/;
-Prism.hooks.add('before-highlight', function(env) {
+Prism.plugins.toolbar.registerButton('show-language', function(env) {
 	var pre = env.element.parentNode;
 	if (!pre || !/pre/i.test(pre.nodeName)) {
 		return;
 	}
 	var language = pre.getAttribute('data-language') || Languages[env.language] || (env.language.substring(0, 1).toUpperCase() + env.language.substring(1));
 
-	/* check if the divs already exist */
-	var sib = pre.previousSibling;
-	var div, div2;
-	if (sib && /\s*\bprism-show-language\b\s*/.test(sib.className) &&
-		sib.firstChild &&
-		/\s*\bprism-show-language-label\b\s*/.test(sib.firstChild.className)) {
-		div2 = sib.firstChild;
-	} else {
-		div = document.createElement('div');
-		div2 = document.createElement('div');
+	var element = document.createElement('span');
+	element.innerHTML = language;
 
-		div2.className = 'prism-show-language-label';
-
-		div.className = 'prism-show-language';
-		div.appendChild(div2);
-
-		pre.parentNode.insertBefore(div, pre);
-	}
-
-	div2.innerHTML = language;
+	return element;
 });
 
 })();
diff --git a/plugins/show-language/prism-show-language.min.js b/plugins/show-language/prism-show-language.min.js