Add syntax highlighting with Prism

The easiest (and recommended) way to install Prism on your blog is by following these steps:

1. Open the admin panel of your Ghost instance and head to the Code injection page.

2. Add the Prism stylesheets links to the Blog Header section. For example, you can paste the following lines in order to use the theme Tomorrow:

<!-- prism.js -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism-tomorrow.min.css" />

You can replace that theme for another you might like. Also you can add the following styles to make it prettier:

<style>
  pre[class*="language-"] {
    margin: 0 0 1.5em !important;
  }
  code {
    text-shadow: none !important;
  }
  .token.operator {
    background: none !important;
  }
  :not(pre) > code[class*="language-"],
  pre[class*="language-"] {
    background: #20262E !important;
  }
</style>

3. Add the Prism scripts to the Blog Footer section. For example, you can paste the following lines in order to support HTML, CSS and Javascript syntax:

<!-- prism.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-markup.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-javascript.min.js"></script>

Of course you can add more languages if needed or remove the ones you don't need.