99fad4c broke syntax highlighting via code injection


#1

I’ve been using highlightjs via code-inject on my Ghost blog:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-light.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

This used to work fine, but I noticed that it’s been broken last few months (e.g. https://floatingsun.net/ghosting-medium/). Doing some debugging, I was able to trace this to this commit – https://github.com/TryGhost/Casper/commit/99fad4cbc430427b01510f0f5e06c9671bc64265#diff-ce5e030f2e2e2a50f18199464f07ea70

Reverting that fixes the problem.

I’m guessing this impacts other highlighters as well. How are people solving this?

Version 1.22.2
Environment production
Database mysql
Casper version: 2.2.0


#2

Have you tried inserting direct into <head> ?


#3

Highlight.js does not have specific enough CSS to override Casper’s styles. You have a few options:

  1. Make changes to your theme (this is what themes are for after all :smile:)
  2. Switch to a different highlighting library. Prism.js works fine
  3. Fix highlight.js

#4

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