Prism.js not working with Rails 4 turbolinks

Question

I discovered that when I use Prism.js syntax highliting in combination with Turbolinks highlighting behaves strangely.

When I load a page that should highlight a syntax for the first time, Prism.js wont be trigger and nothing is highlighted. After reloading the same page Prism will kick in and highlites the code. Page will stay highlighted after that unless I change the location (go to root) and return back to it (after that same scenario)

when I remove Turbolinks from my manifest file (application.js) everything works fine (Of course Turbolinks aren't doing anything)

I don't want to use

= link_to "Foo", blogs_path(blog), "data-no-turbolink" => true 

because I would have to use that on every single link (every blog will have some code highlited), therefore no point of turbolinks at all

I was trying to use Turbolings events like page:change but I'm terrible with pure JavaScript (Prism.js is pure JS & I'm jQuery junky)

so anyone know how to tell Turbolinks to trigger Prism.js syntax highliting ?

Answer 1

I had this exact same issue recently, and the fix I found is to re-run Prism after the page loads. I used the Turbolinks page:load event to trigger this.

In Coffeescript:

$(document).on 'ready page:load', ->
    Prism.highlightAll()

Or in plain JS:

$(document).on('ready page:load', function() {
    Prism.highlightAll();
});