Syntax Highlight with Prism.js in Ghost

Please refer to the steps below on how to add Syntax Highlight with Prism.js in Ghost

  1. Go to Prism and select the language that you would like to be included
  2. 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
  3. Edit the default.hbs file
    /var/www/ghost/content/themes/casper$ sudo vi default.hbs
    
  4. 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"}}" />
    
  5. 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>
    
  6. Restart Ghost
    /var/www/ghost$ ghost restart
    
  7. You can include your code in Post with
     
    ```powershell
    Get-Services
    ``` 

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top