blog.directive.io

Fix code samples in Ghost with Prism in 2022

The tutorial from Ghost on setting up Prism syntax highlighting is old and outdated, it uses Prism 1.19.x and the most recent is version in mid-2022 is 1.28.x.

Most of the tutorial is still applicable – copy the CSS and the JS for prism.min.(css|js) like instructed, and place them in the header and footer of your site respectively. After you complete the tutorial, you'd expect (like I did) that highlighting would work. With recent versions of Prism, it doesn't.

To fix code samples using a modern version of Prism, you must do this additional final step:

In the list of files in CDNJS for Prism, make sure to add the prism-autoloader script tag to your footer:

This additional script will detect the languages it needs to load additional syntax js/css files for. In newer versions of Prism, this has been split out into this new module that you need to include for syntax highlighting to work fully.

Your "Site Footer" section in Ghost admin Code Injection settings will look something like this:

Once you save, your code samples should now have the correct syntax highlighting features!