July 6, 2017 · Ghost Beginner

Add syntax highlighting to Ghost posts

I've recently started using Ghost after staring longingly at it from a WordPress prison. I love the simplicity and the Markdown format (big fan of Markdown), however there was one glaring feature omission - syntax highlighting.

Admission: I don't host my own server currently, I just leave it up to Ghost

A quick google for ghost blog syntax highlighting yields a few blog posts. All of them use PrismJs for the highlighting, however none mention how to select from different highlighting styles.

HowTo

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

The style sheets on offer from Prism can be found here: https://cdnjs.com/libraries/prism

You can choose from the following options:

prism-coy.min.css
prism-dark.min.css
prism-funky.min.css
prism-okaidia.min.css
prism-solarizedlight.min.css
prism-tomorrow.min.css
prism-twilight.min.css
prism.min.css

Pick the one you want to try and put it in the Blog Header section. I use dark:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js" ></script>
  • LinkedIn
  • Tumblr
  • Reddit
  • Google+
  • Pinterest
  • Pocket