Add PrismJS to Ghost for syntax highlighting of code snippets

Out of the box Ghost will not syntax highlight your code snippets. In this blog post I will explain the changes I made to the Casper theme, and how you can look to implement these in your own Ghost site.

There are 2 options, and which option you use is up to you. The code snippets are the same, it is only the method of embedding the snippets that change. Only second option can be version controlled (which I prefer).

Option #1 - Use Code Injection

This is likely the simplest way if you do not have your theme in code, or run Ghost pro, and don't really care about code at all.

You simply add the following code to your Site Header in your blog settings:

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-okaidia.min.css" integrity="sha512-mIs9kKbaw6JZFfSuo+MovjU+Ntggfoj8RwAmJbVXQ5mkAX5LlgETQEweFPI18humSPHymTb5iikEOKWF7I8ncQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <style type="text/css" media="screen">
        .post-full-content pre strong {
            color: white;
        }
        .post-full-content pre {
            line-height: 1;
        }
        .post-full-content pre code {
            white-space: pre-wrap;
            hyphens: auto;
            line-height: 0.7;
            font-size: 0.7em;
        }
    </style>

I have also added some extra CSS to reduce the size of PrismJS code blocks within the Casper theme in Ghost (as it can be quite large), and also allow long strings to wrap to newlines (to avoid horizontal scrolling).

In Site Footer you add something like:

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js" integrity="sha512-hpZ5pDCF2bRCweL5WoA0/N1elet1KYL5mx3LP555Eg/0ZguaHawxNvEjF6O3rufAChs16HVNhEc6blF/rZoowQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-markup-templating.min.js" integrity="sha512-TbMpeuT8rHP3DrAX8tSkpspYIT3It0fypBn5XaSp+Hiy3n9wvPFjd3pal7YtesrphulbmxcLNB9E0sq7xDGtWg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-javascript.min.js" integrity="sha512-3oavHcAYV/4pmn+iDuax6ru7dpjKnd+21+SzCQrYdTiYDncloL7QJ3qYvsA9JU0p7ZQjB+DizGeWMm2sUrCzSQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-css.min.js" integrity="sha512-Jv/EO8zjSyqIDa2S0YjCGFY+mEROxud6g7AhfA0KcggjdzhPBhoRyetxV7G7/dnfBdZBzcOvpRn1K+J6sn3jyw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-php.min.js" integrity="sha512-2RfDhHj8vXXJWFGaCJTSkt//hXtdb9/Sh2c68tx/Jf+0V5a7xOHY1oIlzF9KX591HX/cB+uDQMBXeYX/JKvlrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-sql.min.js" integrity="sha512-OrjGiH3KgAUReMA3g1ieErj5gbS4IBRO7hAklulWwKfEKryUcepiJX68CsdotsNNgY7LzaMuYxX4dxwuVETQmw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-yaml.min.js" integrity="sha512-b6/0OpnNm7BCjXcAwE1dnz7qevijqKfpZJMSqCZV43Y/GpQwOD+3iX2TLNv66YJzlATFUlXLKfHH/oTCjw0yyw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-sass.min.js" integrity="sha512-h8T/5kbfRUfKTBsRyrPGNqgkmlm/boA3a/8o5tK3nSaO5aqFoFcTzFXcvnq8AIoXNMitM9sjZ8fWr9oqERaqHA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-json.min.js" integrity="sha512-NFh0rog24tZqD7+bvhZ15l9r10u/yir42sQ1EuUEWpw2Pyh1KrGUKKXI1TWSAX7RxaohbPn0u1fTb6+YU4u3zA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-twig.min.js" integrity="sha512-Y8Yr7+66sioHjiEXKFJlonu0Pi8H3IHNrGrQl95zPpPW5+mqR27/3zNi5VM4FPDvrF+JEEBF4QJhLsXAk7T0Dg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-bash.min.js" integrity="sha512-/xr8BBHgclic5pEsdspPqQS8ne+X8QbYRK22c1WRDj8zERTBJDH+Ic/3o8vnrdz5yeGzlzMfp8k33tGgDaAh6g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-python.min.js" integrity="sha512-yIpe1UXrH/ZWwu3n7MdHNfMbPXftP0jlg9+lRhzlpbolElt33h3PGx9ICzqf/k+yca3QNzqcO3sdtKJuYRTi4g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-ruby.min.js" integrity="sha512-nw4lRvuD47DTW65G2USfNSu0VSPdl+vJSMz5sR+YQ3/HtG7w4S7pDvh1ygqVuOVSpHDHKqteZ2GroJAPke+3JQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-c.min.js" integrity="sha512-2dToLhWzZAAqzVrUz9rEL24ESI8DDiSBTeb+4e9SUzlcO7f6r5YWr0s6PCZUervWLSqGInffFQZ0SIJ7KXhUMg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

The only real gotcha here is that you must add prism.min.js first, then prism-markup-templating.min.js followed by any and all languages you want to syntax highlight for.

If you want to find the links to more libraries, or newer versions of the above, check out https://cdnjs.com/libraries/prism.

Option #2 - Edit the theme templates

This is just like the above, except you edit the template file default.hbs, and insert the code in the appropriate sections. The end result is the same, except this method allows you to version control the theme (which I prefer).

Final thoughts

The above are the libraries that we run on pixelite, but your needs might be different (i.e. you may need different languages etc). This should serve as a head start for any other people looking to share code snippets, and have them look great on your Ghost site.

Please let me know if you have any other pro tips that I may have missed.