Adding color to Code Snippets in Ghost
I came across this easy to implement feature for adding color to your code snippets in Ghost while updating my Udemy course. Just copy one line to the Site Header and two lines to the Site Footer in Settings, Code Injection as outlined in this Ghost tutorial.
In the header, paste:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/themes/prism-tomorrow.min.css" integrity="sha512-vswe+cgvic/XBoF1OcM/TeJ2FW0OofqAVdCZiEYkd6dwGXthvkSFWOoGGJgS2CW70VK5dQM5Oh+7ne47s74VTg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
In the footer, paste:
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js" integrity="sha512-9khQRAUBYEJDCDVP2yw3LRUQvjJ0Pjx0EShmaQjcHa6AXiOv6qHQu9lCAIR8O+/D8FtaCoJ2c0Tf9Xo7hYH01Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-fTl/qcO1VgvKtOMApX2PdZzkziyr2stM65GYPLGuYMnuMm1z2JLJG6XVU7C/mR+E7xBUqCivykuhlzfqxXBXbg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Those lines load the Prism library and have your site use a highlighting theme called "Tomorrow Night". You can choose from other available themes on the prism site.
You could also do it another way, by adding the functionality to your theme. It's arguably more flexible, but this is pretty easy. You're welcome to check out the Ghost tutorial to see which is best for you.