Newest Casper (2.11.1) breaks Highlight.js themes, Prism.js broken as well

After upgrading to latest Ghost and latest Casper, I’ve found an issue with syntax highlighting:

  1. Highlight.js themes seem to be ignored. Something in Casper just overrides them.
    I’m well aware of 99fad4c broke syntax highlighting via code injection and Casper and highlight.js, but deleting the corresponding lines in the latest Casper screen.css does not seem to resolve the issue.
  2. Prism.js is broken in many ways - the text is huge and responsive mobile support isn’t working.

Any remedies/ideas?

Thanks ahead.

That’s strange :thinking:. I don’t suppose you have a demo of these issues in action? It’ll make this easier to debug :slightly_smiling_face:

You’re more than welcome to experience it live: https://www.devsbedevin.net/avoiding-transactiontoolargeexception-on-android-nougat-and-up/

The highlight.js theme I’ve used is “tomorrow”, which is a light theme. As you can see, the code blocks are dark-themed.

I’ve also tried switching to other Ghost themes with the same code injection - they all seems to work fine and display the correct highlight.js theme (tried Editorial and Massively).

@vaiden I can see the tomorrow.css styles being applied correctly. What I think you want to do is manually set the background colour of the <pre> elements.

Casper has this style (abbreviated):

.post-full-content pre {
   background: #0e0f11;
}

You can match this to your theme by adding this to your Code Injection header or modifying your theme files:

<style>
  .post-full-content pre {
    background: #fff;
  }
</style>
1 Like

Amazing fix. Thanks.

Any plans on making the background of Casper not override code highlitghing themes?