/ ghost

Sytnax highliting with PrismJS on Ghost 1.0

So I've ran the update from Ghost 0.11 to the new(?) Ghost 1.0. Apparently I'm just a sucker for hype.

Everything went smoothly until I've noticed that I've lost syntax highlighting. The code blocks all seemed to share the same look - black over creamy-white.


I'm using PrismJS for syntax highlighting.

My default.hbs seemed to be setup correctly:

{{!-- Styles'n'Scripts --}}

<link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />


<script type="text/javascript" src="{{asset "js/prism.js"}}"></script> --}}

Also: I have not changed the way I marked my code blocks:

import com.package.test;

I've looked at the Chrome dev console - there seemed to be no errors and PrismJS was loaded fine.

The results

Looking at the page source I've found out that all of my code blocks had similar tags:

<pre class=" language-language"><code class="-java language-language">

What got me suspicious was the language-language part. Something was prefixing an uneeded language to my already existing language-jave tag.


So - apparently the Ghost team has switched markdown editors when updating to Ghost 1.x. The new editor adds the language- prefix automatically.

So from now on the code blocks should look like this:

import com.package.test;

And the resulting HTML:

<pre class=" language-java"><code class=" language-java">