March 17, 2018 · Ghost Prism Code Highlight Tutorial

How to add code highlight to Ghost blog with Prism?

Ghost blog platform doesn't support code highlight. Forunately, there are many solutions out there. One of them is Prism. Prism supports many languages; such as javascript, sql, bash, etc.


Download Prism

  1. Visit
  2. Pick a theme, languages, and plugins.
  3. Scroll down and download javascript and css file.


Edit Ghost theme

  1. Copy Prism javascript file to theme's javascript folder. It should be content/themes/{your_theme}/assets/js.

  2. Copy Prism stylesheet file to theme's stylesheet folder. It should be content/themes/{your_theme/assets/css.

  3. Edit content/themes/{your_theme}/default.hbs.

    Add the following tag under {{! Styles }}.

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

    Add the following tag before the body tag.

    <script type="text/javascript" src="{{asset "js/prism.js"}}"></script>
  4. Upload the changes to server.




This will output the following:

<!DOCTYPE html>
<html lang="en">
        <script>window.console && console.log('foo');</script>
        <meta charset="utf-8" />
        <link rel="shortcut icon" href="favicon.png" />

Comments powered by Disqus