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

Developer help
1

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 - #3 by Kevin and Casper and highlight.js - #5 by Jivebunny, 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.

2

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:

3

You’re more than welcome to experience it live: 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).

5

@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
6

Amazing fix. Thanks.

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