When PrismJs doesn't play nice with your Ghost blog

Full article

That's right. It's a prism.. melting a ghost.

I realized recently that none of the code snippets on my Ghost blog were displaying syntax highlighting, which used to work thanks to Prism.js. When did it stop working? Who the heck knows. The question is.. why?

It took me a little while to realize Prism.js was still working, but something else was cancelling it out somehow. When I refreshed the page, I could briefly see the syntax highlighting come through before disappearing to all black again. (patience...... waiiiit for it...)

Here's the difference between the two, the first showing how Prism.js should highlight C# code, and how it was actually showing up in the browser.

Depths of a Theme

I delved into the theme files for my blog, and started commenting out references to CSS and JS files in default.hbs to see if something was playing havoc with Prism. Once I commented out JQuery, syntax highlighting started working again. Um...

{{!-- Scripts --}}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="{{asset "js/jquery-3.3.1.min.js"}}"><\/script>');</script>
<script src="{{asset "js/plugins.js"}}"></script>
<script src="{{asset "js/custom.js"}}"></script>
<script src="{{asset "js/prism.js"}}"></script>

A Fishy CSS Class

At that point, I took a closer look at the source code and saw something pretty fishy. With JQuery disabled, I got the markup on the left. With it enabled, I got the markup on the right with a new class called rainbow. Where'd that come from???

As it turns out, the theme I'm using (Wildbird - a really fantastic theme btw!) uses several plugins by default, including a syntax highlighting library similar to Prism.js called Rainbow.

Too Much of a Good Thing

The plugins are defined in assets/js/plugins.js, so I had to comment out the code for Rainbow and restart Ghost, then syntax highlighting worked again! 😅

/* Rainbow v2.1.3 rainbowco.de | included languages: c, coffeescript, css, generic, html, java, javascript, php, python, ruby */
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.Rainbow=t()}(this,function(){"u$


Grant Winney

I write when I've got something to share - a personal project, a solution to a difficult problem, or just an idea. We learn by doing and sharing. We've all got something to contribute.

Comments / Reactions