Toolbar

Attach a toolbar for users to easily view and copy the raw code.

How to use

Add a class of code-toolbar to the <pre> code block and the plugin will do the rest.

<pre class="code-toolbar"> … </pre>

Optional: You can customize the success message when a user copies the code to the clipboard by adding a data-copy-success attribute to the <pre> tag. If set to a blank string, it will disable the success notification.

This plugin utilizes ZeroClipboard to copy code to the user's clipboard. Should you choose to not include ZeroClipboard, the "Copy to clipboard" link will be removed from the toolbar.

Examples

Below are some examples of the toolbar being added, with the code being from the plugin asset files.

JavaScript



  

CSS

Note how the copy success message has changed via custom text in the data-copy-success attribute.



  

HTML

Note how the copy success message no longer displays via a blank data-copy-success attribute.