When starting to build this blog, I looked for some pre-made, free themes and end up choosing this simple, clean template to use.

Naturally, the next step was tweak it a bit to fit my needs: making a favicon, adding RSS button to the footer, removing a bit of default content, and yeah, adding Prism.js for sharing code blocks.

Better be prepared than needing to update my Prism reference later, so I choosed to activate syntax highlighting to all languages supported by the tool at the download section.

After that, easy peasy: just needed to add it to my cloned template (assets/js/prism.js and assets/css/prism.css), and insert a reference to it on default.hbs file:

<!DOCTYPE html>
  <!-- ... -->
  <link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />
  <!-- ... -->
<body class="{{body_class}}">
  <!-- ... -->
  <script type="text/javascript" src="{{asset "js/prism.js"}}"></script>
  <!-- ... -->

Everything looking fine, time to pack it to a zip file and upload it to Ghost. I decided to make a test post to see if Prism would work fine:

My test post

Then I came with something strange happening. For some reason, when I came up to my test post by selecting it from the browse posts link, Prism.js syntax highlighting wasn't working as expected. Not only the block was not being formatted correctly, but it also was not readable at all:

My problem with Prism.js

After some research, It came up that the problem was related to the way the navigation links were built. At the scripts.js file, we see that Ghostwriter's template uses jQuery $.get to fetch it's own domain links and load them to the page container, without refreshing it at all:

// Get the requested url and replace the current content
// with the loaded content
$.get(State.url, function(result) {
    var $html = $(result);
    var $newContent = $('#ajax-container', $html).contents();

    // Set the title to the requested urls document title
    document.title = $html.filter('title').text();

    $('html, body').animate({'scrollTop': 0});

    $ajaxContainer.fadeOut(500, function() {
        $latestPost = $newContent.filter('#latest-post');
        $postIndex = $newContent.filter('#post-index');

        if (showIndex === true) {
        } else {

        // Re run fitvid.js



        loading = false;
        showIndex = false;
}).fail(function() {
    // Request fail

Prism's way of working is to run it's syntax highlighting just after being embedded to the page, and that's why we should load it at the end of the HTML, after all content. However, it does not run for any content loaded or updated after it. So, at this model, after clicking in any of the links that load the page this way, it won't work.

The solution was pretty simple, though. If you look at the Prism object using Chrome Developer tools, you will see that it has two methods that help in those cases, highlightAll() and highlightElement(). The first one forces Prism to apply it's highlighting to everything marked in DOM, and the second one does it for a specific element, passed as its argument.

As I can't know how many code areas I will have on every post, it's clear that I would need the first function. So, I just needed to call it right after the content update:

// ...


// Rerun Prism syntax highlighting on the current page

// ...

For reference, see my forked repository from Ghostwriter's template. Now, yes, everything is fine and ready for more posting!