Using PrismJS With Ghost

Using PrismJS With Ghost

I recently created a fork of the popular Attila Ghost theme. Attila is a beautiful, responsive, content-focused theme you've probably seen (if not, go check it out!). I hesitated to fork at first, but wanted to customize things in a way which better matched my personal website (that probably wouldn't thrill the larger community). Another big reason was a desire to use PrismJS for syntax highlighting. Attila includes custom highlighting which is lightweight and functional (and works out of the box), but is not as expressive.

PrismJS supports most popular languages, integrates with common bundlers, easily plugs into NodeJS (and many others), has a plugin system, theme support, is extremely lightweight (you can include only the pieces you need), and is often described as beautiful. Features and look aside, it's also heavily used so lends consistency for readers.

If you try to use PrismJS with Attila, you'll get conflicts with the built-in syntax highlighting. That said, the automatic line numbering feature is pretty slick (since it works out of the box without adding a PrismJS plugin that is clumsier to use read: not automatic). That's why I created Ardaric. Ardaric makes different choices in a couple places (e.g. use of system fonts and viewport width-based scaling), but the biggest difference is PrismJS compatability.

Simply clone Ardaric, run grunt build;grunt compress, upload dist/ardaric.zip to your Ghost instance as usual, then configure PrismJS. To do that, simply go to Code injection and add the following to Site Header (adjust as needed if you prefer a theme other than Okaidia):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism-okaidia.min.css" integrity="sha256-Ykz0nNWK7w4QWJUYR7OraN4773aMB/11aMt1nZyrhuQ=" crossorigin="anonymous" />
Configuring Ghost's Site Header for PrismJS

Now add the core and any language support you need in Site Footer:

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/prism.min.js" integrity="sha256-HWJnMZHGx7U1jmNfxe4yaQedmpo/mtxWSIXvcJkLIf4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-core.min.js" integrity="sha256-Y+Budm2wBEjYjbH0qcJRmLuRBFpXd0VKxl6XhdS4hgA=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-bash.min.js" integrity="sha256-W7l8nP5GgjHSb7BvkoJKZQ+6+qFPM2VT6aF1lISibsA=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-clike.min.js" integrity="sha256-yLywlZBInSTeO8eTUtLZ9QQHOmG5xwT+FfEIjjMC8RU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-css.min.js" integrity="sha256-mVHVEQoDvF2t7a6kQxvHdS7YDnfxu9XHx8kh/g9gY/k=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-docker.min.js" integrity="sha256-ifJL/vvc8YYWybDShtSFGw6vq6THAf96G1GaUQqQUzM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-go.min.js" integrity="sha256-0gPlDXMlahNpCwHdKGf6TkjpLCXUS7mliN3nmbKOBCc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-hcl.min.js" integrity="sha256-5fj6iqwnPfZ3iPrdG5gdTWxXxZ8VRTTcJxo4YdZ4ZFM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-javascript.min.js" integrity="sha256-Fck6LA/qj8sXp1+RQhukXSoj2T3EBrl69L4QUV74Co8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-json.min.js" integrity="sha256-tLgG7JGsKcY/xjGqVS3C/Rx8u5qq4OKmB9+g38o935c=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-makefile.min.js" integrity="sha256-pbm9rQGN4Ore8f63Nc0XohO/ndkqmaCkiM+t++tZS6s=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-yaml.min.js" integrity="sha256-JoqiKM2GipZjbGjNyl62d6qjQY1F9QTLriWOe4N76wE=" crossorigin="anonymous"></script>
Configure Ghost's Site Footer for PrismJS

You always need prism.min.js and prism-core.min.js, but be sure to tweak the language list as needed. You might also decide to self-host or prefer an alternate CDN. I've found CDNJS to have great performance. To get the right links, browse the full list of PrismJS assets.

Easy, beautiful, lightweight syntax highlighting!

Show Comments