Ghost

Integrating Prism.js for Code Highlighting and Copy-to-Clipboard Functionality in Ghost

Amit Jotwani

Amit Jotwani

— 2 min read
Integrating Prism.js for Code Highlighting and Copy-to-Clipboard Functionality in Ghost

I wanted to enhance my Ghost blog's code snippets with syntax highlighting and a convenient copy-to-clipboard feature. For this, I integrated Prism.js - a lightweight, extensible syntax highlighter.

Here's how I did it, broken down into the code for the site header and footer.

Files and Code

1. Site Header Code

In the Ghost admin panel, navigate to "Settings" > "Code Injection". Under the "Site Header" section, insert the following code:

<!-- Plausible Analytics Script -->
<script defer data-domain="curiousmints.com" src="https://plausible.io/js/plausible.js"></script>

<!-- Prism.js Theme Stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/themes/prism-tomorrow.min.css" integrity="sha512-vswe+cgvic/XBoF1OcM/TeJ2FW0OofqAVdCZiEYkd6dwGXthvkSFWOoGGJgS2CW70VK5dQM5Oh+7ne47s74VTg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- Custom Styles for Prism.js and Blog Layout -->
<style>
  /* Prism.js Toolbar Positioning */
  .code-toolbar {
    position: relative;
  }
  .toolbar {
    position: absolute;
    top: 14px;
    right: 0;
    font-size: 14px;
    color: green;
  }
  .toolbar-item {
    display: inline-block;
    margin-right: 5px;
  }
  .copy-to-clipboard-button, .toolbar-item > button {
    color: green;
  }

  /* Additional Custom Styles for Blog */
  /* ... */
</style>

In this part, we include the Prism.js theme and set up custom styles to ensure the toolbar is positioned correctly and styled to match the blog's theme.

Similarly, in the "Site Footer" section of "Code Injection", add the following scripts:

<!-- Prism Core -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js" integrity="sha512-9khQRAUBYEJDCDVP2yw3LRUQvjJ0Pjx0EShmaQjcHa6AXiOv6qHQu9lCAIR8O+/D8FtaCoJ2c0Tf9Xo7hYH01Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- Autoloader Plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-fTl/qcO1VgvKtOMApX2PdZzkziyr2stM65GYPLGuYMnuMm1z2JLJG6XVU7C/mR+E7xBUqCivykuhlzfqxXBXbg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- Toolbar Plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/toolbar/prism-toolbar.min.js"></script>

<!-- Copy-to-Clipboard Plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>

These scripts include the core functionality of Prism.js and the additional plugins for autoloading language definitions, creating a toolbar, and adding a copy-to-clipboard button to code blocks.

Conclusion

With this setup, I've successfully enhanced my code snippets on the Ghost blog, making them not only visually appealing but also user-friendly with the copy-to-clipboard feature. Remember, you can always tweak the CSS to better fit your blog's design.

Read more