Add a copy option to your Prism Syntax highlighter in Ghost

To make your Syntax Highlighter more user-friendly it is convenient to add a copy button. In this post, I will show you how to easily add a copy button to your Prism syntax highlighter.

1. Inject copy to clipboard CDNs into our code

First, we start by adding the copy to the clipboard and the toolbar CDNs within our code Injection.

Header

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/toolbar/prism-toolbar.min.css"/>

Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/toolbar/prism-toolbar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>

Do not forget to click the Save button.

2. Make sure the copy button is working

This is everything we had to do, to make sure the copy button is working. Go to one of your posts that has a code block, and as you hover over the code block you will notice that there is a copy button now.

You will not see the copy button when checking in the editor, so make sure you are in Preview mode or checking a published post.

If the copy button is not working for you, make sure that all the CDNs have the same version and are not colliding with each other.

3. Conclusion

We easily added a copy function by just pasting CDNs in your Code Injection. In the future, I might look into the styling of the button, but for now, this will do the trick.