Adding Code Syntax Highlighting to a Ghost Blog with Prism.js

rm3l -

Ghost is an awesome and user-friendly Open-Source platform for blogging. But by default, it does not support syntax highlighting, which may not be very practical if you happen to add code snippets to your posts.

Thankfully, Ghost is very easy to customize in different ways, and one way we are going to explore here is via Code Injection, as in use throughout my own blog.

Ghost's Code Injection feature allows to add custom CSS styles and JS code to the header and footer of all or individual articles.

There are several code syntax highlighting libraries out there, such as:

They essentially almost have the same features. So no matter what you chose, the steps depicted below will be pretty much the same.

Prism.js Code Injection

Go to Settings > Code Injection from the Admin menu.

Then add the CSS in the Blog Header section, and the JS files (core + all languages you wish to use) in the Blog Footer section.

Blog Header

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism.min.css"></link>

Here you have to first include the core library (prism.min.js), and all JS files for all individual languages you wish to have highlighting support for.

You can link to a CDN like https://cdnjs.com/libraries/prism to select exactly the languages libraries you wish to have included.

For example:

<!-- Core -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js"></script>

<!-- All individual language files -->
<!-- Java syntax highlighting-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-java.min.js"></script>
<!-- Golang syntax highlighting -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-go.min.js"></script>
<!-- GraphQL syntax highlighting -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-graphql.min.js"></script>

Rather than manually include each individual language library, if you are able to auto-host and serve your own files, you can also head to the Prism.js download page, where you can pick whatever language and download tailored JS and CSS files, which you can then include as above.

Using Prism.js

At this point, Prism.js will be automatically activated as soon as a valid Markdown code syntax is encountered with the language specified.

Remember to use ```language before the code snippet and ``` after to have your code block highlighted.

Example with a Dart code snippet which has to be written like this:

```dart
import 'dart:async';

const news = '<gathered news goes here>';
const oneSecond = Duration(seconds: 1);

// Imagine that this function is more complex and slow. :)
Future<String> gatherNewsReports() =>
    Future.delayed(oneSecond, () => news);

Future<void> printDailyNewsDigest() async {
  var newsDigest = await gatherNewsReports();
  print(newsDigest);
}

main() {
  printDailyNewsDigest();
}
```

This is highlighted as follows:

import 'dart:async';

const news = '<gathered news goes here>';
const oneSecond = Duration(seconds: 1);

// Imagine that this function is more complex and slow. :)
Future<String> gatherNewsReports() =>
    Future.delayed(oneSecond, () => news);

Future<void> printDailyNewsDigest() async {
  var newsDigest = await gatherNewsReports();
  print(newsDigest);
}

main() {
  printDailyNewsDigest();
}

Thanks for reading.

As always, your feedback and comments are more than welcome!