Prism Highlighting Formatting issues

When I add the Prism.js css and js

  • What’s your URL?
  • What version of Ghost are you using? Latest docker image
  • What configuration?
  • What browser? Google Chrome
  • What errors or information do you see in the console? No errors
  • What steps could someone else take to reproduce the issue you’re having?

Add the following code in the beginning of default.hbs

    {{!-- 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"}}" />

Add the following code in the end of default.hbs

     {{!-- The #block helper will pull in data from the #contentFor other template files. In this case, there's some JavaScript which we only want to use in post.hbs, but it needs to be included down here, after jQuery has already loaded. --}}
{{{block "scripts"}}}

{{!-- Prism Javascript --}}
<script type="text/javascript" src="{{asset "js/prism.js"}}"></script>

{{!-- Ghost outputs important scripts and data with this tag - it should always be the very last thing before the closing body tag --}}

The latest Prism css and js is downloaded and put in the assets folder as per many instructions found on the web.

As you can can see from this picture the frame of the prism highlight section is t00 small and the font looks weird.

If this can help this is how I integrate highlight-js

Check between line 32 to 50 and 127 to 129.


Seems pretty similar to what I did well except you using highlight.js ofcourse.

This is the full link to my default.hbs

Does it work with highlight then?

Yes highlight.js seems to work but I would prefer using prism because it has plugins that add functionality such as copying the source section. But until this issue is solved I am using this thank you for the suggestion :slight_smile:

Glad I could help!

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.