Adding Syntax Highlighting to Ghost without editing any files
If you want syntax hightlighting on your Ghost blog follow this small tutorial.
Do you want syntax highlighting like the code above or the code in HTML5 Skeleton file on your own Ghost blog? Then follow this small tutorial.
To add syntax highlighting to our Ghost blog we will use Prismjs.
As the title said we won't edit any files, we will use a few lines of code from cdnjs that is hosting the prism libraries and add the to the Code injection section of Ghost.
First go to your Ghost settings by pressing on the Gear icon in your Ghost Admin panel after, go to the advanced section and click on Code Injection.
On the Code Injection page you will see two sections. Site Header and Site Footer.
First we will add some css code with the following tag to the Site Header
Now we will add a js code tag to the Site Footer
After adding both line of codes to the site header and site footer you press Save and you should have a working Syntax Highlighting on you Ghost blog.
If you also want to use Python syntax highlighting you need to add a extra tag to your site footer
You can also add some different theme's that will change the look of your syntax highlighting. On this Ghost blog I use the Okaidia theme. To use the same theme add the following tag to your site header