Please refer to the steps below on how to add Syntax Highlight with Prism.js in Ghost
- Go to Prism and select the language that you would like to be included
- Download both prism.css & prism.js and upload to
/var/www/ghost/content/themes/casper/assets/css
/var/www/ghost/content/themes/casper/assets/js - Edit the default.hbs file
/var/www/ghost/content/themes/casper$ sudo vi default.hbs
- Paste "<link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />" under {{!– Styles’n’Scripts –}}
{{!-- Styles'n'Scripts --}} <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" /> <link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" /> <link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css' /> <link rel="stylesheet" type="text/css" href="{{asset "css/custom.css"}}" />
- Paste "<script type="text/javascript" src="{{asset "js/prism.js"}}"></script>" under {{!– jQuery + Fitvids, which makes all video embeds responsive –}}
{{!-- jQuery + Fitvids, which makes all video embeds responsive --}} <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"> </script> <script type="text/javascript" src="{{asset "js/jquery.fitvids.js"}}"></script> <script type="text/javascript" src="{{asset "js/prism.js"}}"></script> {{#if pagination.pages}} <script>
- Restart Ghost
/var/www/ghost$ ghost restart
- You can include your code in Post with
```powershell Get-Services ```