ghost-blogghostprismjs

Ghost - PrismJS syntax highlighting not working after updating to Ghost 1.0

I'm running a Ghost blog hosted on Ghost.io.

They're currently running a system-wide update from Ghost 0.11 to Ghost 1.0.

The update went fine, but I've lost the PrismJS syntax highliting. The code blocks all share the same look - black over creamy-white.

My default.hbs seems 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> --}}
...
</body>

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

```language-java
import com.package.test;
```

I've looked at Chrome dev console - there seems to be no errors.

Any leads?

Solution

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

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

    The language-language part got me a bit suspicious.

    TL;DR

    So - apparently the Ghost team has switched markdown editors when updating to Ghost 1.x. The new editor adds the language- prefix automatically. So the code blocks should look like this:

    ```java
import com.package.test;
```

    And the resulting HTML:

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

    More info: https://www.devsbedevin.net/sytnax-highliting-with-prismjs-on-ghost-1-0/