Created
January 19, 2015 06:19
-
-
Save geoffreymcgill/d118939d1d358d2ed5e8 to your computer and use it in GitHub Desktop.
Prism with Copy to Clipboard
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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); | |
| }); | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment